@orangesix/react 1.0.3 → 1.0.7

package/table/_table.scss

@@ -0,0 +1,136 @@
+:root {
+  --table-frozen: #fff;
+  --table-sort-size: 12px;
+  --table-sort-active: #0D6EFD;
+  --table-checkbox-size: 17px;
+  --table-scrollbar: #e1e1e1;
+  --table-select: var(--bs-light, #e1e1e1);
+  --table-header: var(--bs-light, #f5f5f5);
+  --table-footer: var(--bs-light, #f5f5f5);
+  --table-paginator-color: var(--bs-secondary-300, #b9b9b9);
+  --table-paginator-active: var(--bs-primary, #0D6EFD);
+}
+
+.table-responsive {
+  width: 100%;
+}
+
+.table {
+  width: 100%;
+  margin-bottom: 0;
+
+  &-footer,
+  &-header {
+    width: 100%;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    background: var(--table-header, #F5F5F5);
+    border-bottom: 1px solid #dee2e6;
+  }
+
+  &-footer {
+    border-top: 1px solid #dee2e6;
+    background: var(--table-footer, #F5F5F5);
+  }
+
+  &-sort {
+    cursor: pointer;
+    color: var(--bs-secondary, #5555);
+
+    svg {
+      width: var(--table-sort-size, 12px);
+      height: var(--table-sort-size, 12px);
+    }
+  }
+
+  &-sort-active {
+    span[data-pc-section='sort'] {
+      svg {
+        color: var(--bs-primary, #0D6EFD);
+      }
+    }
+  }
+
+  &-resizable {
+    text-overflow: ellipsis;
+  }
+}
+
+/**
+ * Personalização do style do PrimeReact
+ */
+.p-datatable {
+
+  .p-datatable-wrapper {
+    &::-webkit-scrollbar {
+      height: 8px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: var(--table-scrollbar, #e1e1e1);
+      border-radius: 10px;
+    }
+  }
+
+  .p-datatable-tbody {
+    .p-highlight {
+      background: var(--table-select, #e1e1e1);
+
+      td {
+        font-weight: bolder;
+      }
+
+      td.p-frozen-column {
+        background: var(--table-select, #e1e1e1);
+      }
+    }
+
+    .p-row-toggler {
+      width: 14px;
+      height: 14px;
+      margin-left: 5px;
+    }
+  }
+
+  .p-frozen-column {
+    position: sticky;
+  }
+
+  .p-frozen-column[data-pc-section="bodycell"] {
+    background: var(--table-frozen, #fff)
+  }
+
+  .p-checkbox-box {
+    width: var(--table-checkbox-size, 17px);
+    height: var(--table-checkbox-size, 17px);
+  }
+
+  .p-checkbox.p-highlight .p-checkbox-box {
+    background: var(--bs-primary, #0D6EFD);
+    border-color: var(--bs-primary, #0D6EFD);
+  }
+
+  .p-checkbox:has(.p-checkbox-input:hover) .p-highlight .p-checkbox-box {
+    border-color: var(--bs-primary, #0D6EFD);
+  }
+
+  .p-paginator {
+
+    .p-paginator-first,
+    .p-paginator-page,
+    .p-paginator-last, {
+      font-size: .9em;
+      min-width: 28px;
+      height: 28px;
+      color: var(--table-paginator-color, #b9b9b9)
+    }
+
+    .p-paginator-page.p-highlight {
+      color: #fff;
+      border: none;
+      background: var(--table-paginator-active, #0D6EFD);
+    }
+  }
+}
+

package/table/index.cjs.js

@@ -0,0 +1,2 @@
+"use strict";var e=require("react"),t=require("primereact/utils"),a=require("primereact/column"),o=require("primereact/datatable");const r=({children:a,...o})=>{const r={size:`box-size-${o.size??"100"}`,direction:`box-direction-${o.direction??"row"}`,justify:void 0===o.justify?"":Array.isArray(o.justify)?o.justify?.join(" "):o.justify,align:void 0===o.align?"":Array.isArray(o.align)?o.align?.join(" "):o.align},n={className:t.classNames(["box",o.className??"",r.size,r.direction,r.justify,r.align]),style:o.css};return e.createElement("div",{...n},a)};function n(e){return{value:e.data,dataKey:"id",lazy:void 0!==e.lazy,resizableColumns:e.styleResizable??!1,columnResizeMode:"expand",emptyMessage:e.emptyMessage??"Não há informações disponíveis no momento.",header:e.templeteHeader,footer:e.templateFooter}}function l(e){return{sortField:e.lazy?.sortField,sortOrder:e.lazy?.sortOrder??null,onSort:void 0!==e.lazy?function(t){e.onSort&&e.onSort(t.sortField,t.sortOrder)}:void 0}}function i(e,t,a){return{groupRowsBy:e.rowGroup,rowGroupMode:e.rowGroupMode,rowGroupHeaderTemplate:e.rowGroupHeaderTemplate,rowGroupFooterTemplate:e.rowGroupFooterTemplate,expandableRowGroups:e.rowExpandable??!1,expandedRows:t,onRowToggle(e){a(e.data)}}}function s(e){return{metaKeySelection:void 0!==e.onSelection,selection:e.selection,selectionMode:void 0!==e.onSelection?e.selectionMode??"single":void 0,onSelectionChange:function(t){e.onSelection&&e.onSelection(t.value)}}}function d(t){return{paginator:t.paginator??!1,paginatorClassName:"pagination",totalRecords:t?.lazy?.paginationTotal??void 0,first:void 0===t?.lazy?.paginationPage?0:((t?.lazy?.paginationPage??0)-1)*(t.paginatorRow??10),rows:t.paginator?t.paginatorRow??10:void 0,rowsPerPageOptions:[5,10,15,20,50,100],paginatorTemplate:{layout:"RowsPerPageDropdown FirstPageLink PageLinks LastPageLink CurrentPageReport",CurrentPageReport:t=>e.createElement("p",{className:"text-secondary mx-2",style:{fontSize:".9em"}},"Total de registros: ",t.totalRecords),RowsPerPageDropdown:t=>e.createElement("select",{className:"form-select form-select-sm mx-2",style:{maxWidth:"60px"},value:t.value,onChange:e=>{const a={};a.value=Number(e.target.value),t.onChange(a)}},t.options.map((t=>e.createElement("option",{key:t.value,value:t.value},t.label))))},paginatorRight:t.templatePaginationRight,paginatorLeft:t.templatePaginationLeft,onPage:void 0!==t.lazy?function(e){let a=e.first/(t.paginatorRow??10);t.onPaginator&&t.onPaginator(a+1,e.rows)}:void 0}}function c(e){return{root:{className:"table-responsive"},table:{className:t.classNames(["table",e.styleHover?"table-hover":"",e.styleStriped?"table-striped":"","small"===e.styleSize?"table-sm":"","bordered"===e.styleType?"table-bordered":"borderless"===e.styleType?"table-borderless":""])},header:{className:"table-header"},footer:{className:"table-footer"},paginator:{root:{className:t.classNames(["p-0 d-flex mb-1 mt-2",`justify-content-${e.paginatorAlign??"center"}`]),style:{borderTop:"none"}},firstPageButton:{style:{borderTopLeftRadius:"3px",borderBottomLeftRadius:"3px"}},lastPageButton:{style:{borderTopRightRadius:"3px",borderBottomRightRadius:"3px"}}}}}function p(){return{sort:{className:"table-sort"},headerCell:e=>({className:t.classNames([e?.context.sorted?"table-sort-active":""])}),bodyCell:{className:"table-resizable"}}}exports.Table=function(t){const[u,m]=e.useState([]);return e.createElement(r,{className:"p-0",size:t.size??"100"},e.createElement(o.DataTable,{pt:{...c(t)},tableClassName:t.className,...n(t),...l(t),...s(t),...d(t),...i(t,u,m)},"checkbox"===t.selectionMode&&e.createElement(a.Column,{align:"center",headerStyle:{width:"2.5rem"},pt:{...p()},selectionMode:"multiple"}),t.column.map((t=>e.createElement(a.Column,{unstyled:!0,align:t.align,alignFrozen:t.frozen?"right":void 0,alignHeader:t.alignHeader,body:t.body,field:t.id,frozen:void 0!==t.frozen,header:t.header,key:t.id,pt:{...p()},sortable:t.sort??!1,style:t.style})))))};
+//# sourceMappingURL=index.cjs.js.map

package/table/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../../src/box/box.tsx","../../src/table/core/core.tsx","../../src/table/core/sort.tsx","../../src/table/core/group.tsx","../../src/table/core/selection.tsx","../../src/table/core/pagination.tsx","../../src/table/styled.ts","../../src/table/table.tsx"],"sourcesContent":["import { BoxProps } from \"./types\";\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { classNames } from \"primereact/utils\";\r\n\r\n/**\r\n * Componente - `Box`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n *\r\n * Exemplo de uso:\r\n * ```tsx\r\n * <Box align=\"align-items-center\"\r\n *      justify=\"justify-content-end\"\r\n *      size=\"25\">\r\n *   ...conteúdo HTML\r\n * </Box>\r\n * ```\r\n */\r\nexport const Box = ({ children, ...props }: BoxProps) => {\r\n    const css = {\r\n        size: `box-size-${(props.size ?? \"100\")}`,\r\n        direction: `box-direction-${props.direction ?? \"row\"}`,\r\n        justify: props.justify === undefined ? \"\" : Array.isArray(props.justify) ? props.justify?.join(\" \") : props.justify,\r\n        align: props.align === undefined ? \"\" : Array.isArray(props.align) ? props.align?.join(\" \") : props.align\r\n    };\r\n\r\n    const attr: HTMLAttributes<\"div\"> & Omit<BoxProps, \"children\"> = {\r\n        className: classNames([\r\n            \"box\",\r\n            props.className ?? \"\",\r\n            css.size,\r\n            css.direction,\r\n            css.justify,\r\n            css.align\r\n        ]),\r\n        style: props.css\r\n    };\r\n\r\n    return (\r\n        <div {...attr as any}>{children}</div>\r\n    );\r\n};","import { TableProps } from \"../types\";\r\nimport { DataTableBaseProps } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo principal da tabela.\r\n */\r\nexport function tableCore(\r\n    props: TableProps<any>\r\n): Partial<DataTableBaseProps<any>> {\r\n    return {\r\n        value: props.data as any,\r\n        dataKey: \"id\",\r\n        lazy: props.lazy !== undefined,\r\n        resizableColumns: props.styleResizable ?? false,\r\n        columnResizeMode: \"expand\",\r\n        emptyMessage: props.emptyMessage ?? \"Não há informações disponíveis no momento.\",\r\n        header: props.templeteHeader,\r\n        footer: props.templateFooter\r\n    };\r\n}","import { TableProps } from \"../types\";\r\nimport { DataTableProps, DataTableStateEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo de ordenação de resultado.\r\n */\r\nexport function tableSort(\r\n    props: TableProps<any>\r\n): Partial<DataTableProps<any>> {\r\n\r\n    function onSort(event: DataTableStateEvent) {\r\n        if (props.onSort) {\r\n            props.onSort(event.sortField, event.sortOrder);\r\n        }\r\n    }\r\n\r\n    return {\r\n        sortField: props.lazy?.sortField,\r\n        sortOrder: props.lazy?.sortOrder ?? null,\r\n        onSort: props.lazy !== undefined ? onSort : undefined\r\n    };\r\n}","import React from \"react\";\r\nimport { TableProps } from \"../types\";\r\nimport { DataTableBaseProps, DataTableRowToggleEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações de agrupamento da tabela.\r\n */\r\nexport function tableGroup(\r\n    props: TableProps<any>,\r\n    expandedRows: any,\r\n    setExpandedRows: React.Dispatch<any>\r\n): Partial<DataTableBaseProps<any>> {\r\n    return {\r\n        groupRowsBy: props.rowGroup,\r\n        rowGroupMode: props.rowGroupMode,\r\n        rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,\r\n        rowGroupFooterTemplate: props.rowGroupFooterTemplate,\r\n        expandableRowGroups: props.rowExpandable ?? false,\r\n        expandedRows: expandedRows,\r\n        onRowToggle(event: DataTableRowToggleEvent) {\r\n            setExpandedRows(event.data);\r\n        }\r\n    };\r\n}","import { TableProps } from \"../types\";\r\nimport { DataTableProps, DataTableSelectionSingleChangeEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo de seleção de dados.\r\n */\r\nexport function tableSelection(\r\n    props: TableProps<any>\r\n): Partial<DataTableProps<any>> {\r\n\r\n    function onSelect(e: DataTableSelectionSingleChangeEvent<any>) {\r\n        if (props.onSelection) {\r\n            props.onSelection(e.value);\r\n        }\r\n    }\r\n\r\n    return {\r\n        metaKeySelection: props.onSelection !== undefined,\r\n        selection: props.selection,\r\n        selectionMode: props.onSelection !== undefined ? (props.selectionMode as any ?? \"single\") : undefined,\r\n        onSelectionChange: onSelect,\r\n    };\r\n}","import React from \"react\";\r\nimport { TableProps } from \"../types\";\r\nimport { PaginatorChangeEvent } from \"primereact/paginator\";\r\nimport { DataTableBaseProps, DataTableStateEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo de paginação de resultado.\r\n */\r\nexport function tablePagination(\r\n    props: TableProps<any>\r\n): Partial<DataTableBaseProps<any>> {\r\n\r\n    function onPage(event: DataTableStateEvent) {\r\n        let paginationPage = event.first / (props.paginatorRow ?? 10);\r\n        if (props.onPaginator) {\r\n            props.onPaginator(paginationPage + 1, event.rows);\r\n        }\r\n    }\r\n\r\n    return {\r\n        paginator: props.paginator ?? false,\r\n        paginatorClassName: \"pagination\",\r\n        totalRecords: props?.lazy?.paginationTotal ?? undefined,\r\n        first: props?.lazy?.paginationPage === undefined ? 0 : ((props?.lazy?.paginationPage ?? 0) - 1) * (props.paginatorRow ?? 10),\r\n        rows: props.paginator ? (props.paginatorRow ?? 10) : undefined,\r\n        rowsPerPageOptions: [5, 10, 15, 20, 50, 100],\r\n        paginatorTemplate: {\r\n            layout: \"RowsPerPageDropdown FirstPageLink PageLinks LastPageLink CurrentPageReport\",\r\n            CurrentPageReport: options => {\r\n                return (\r\n                    <p className=\"text-secondary mx-2\"\r\n                       style={{ fontSize: \".9em\" }}>Total de registros: {options.totalRecords}</p>\r\n                );\r\n            },\r\n            RowsPerPageDropdown: options => {\r\n                return (\r\n                    <select className=\"form-select form-select-sm mx-2\"\r\n                            style={{ maxWidth: \"60px\" }}\r\n                            value={options.value}\r\n                            onChange={(e) => {\r\n                                const event = {} as PaginatorChangeEvent;\r\n                                // @ts-ignore\r\n                                event.value = Number(e.target.value);\r\n                                options.onChange(event);\r\n                            }}>\r\n                        {options.options.map(obj => <option key={obj.value}\r\n                                                            value={obj.value}>{obj.label}</option>)}\r\n                    </select>\r\n                );\r\n            }\r\n        },\r\n        paginatorRight: props.templatePaginationRight,\r\n        paginatorLeft: props.templatePaginationLeft,\r\n        onPage: props.lazy !== undefined ? onPage : undefined,\r\n    };\r\n}","import { TableProps } from \"./types\";\r\nimport { classNames } from \"primereact/utils\";\r\nimport { ColumnPassThroughOptions } from \"primereact/column\";\r\nimport { DataTablePassThroughOptions } from \"primereact/datatable\";\r\n\r\n/**\r\n * Realiza a personalização na TABLE\r\n */\r\nexport function bootstrapTableStyle(props: TableProps<any>): DataTablePassThroughOptions {\r\n    return {\r\n        root: {\r\n            className: \"table-responsive\"\r\n        },\r\n        table: {\r\n            className: classNames([\r\n                \"table\",\r\n                props.styleHover ? \"table-hover\" : \"\",\r\n                props.styleStriped ? \"table-striped\" : \"\",\r\n                props.styleSize === \"small\" ? \"table-sm\" : \"\",\r\n                props.styleType === \"bordered\" ? \"table-bordered\" : props.styleType === \"borderless\" ? \"table-borderless\" : \"\",\r\n            ]),\r\n        },\r\n        header: {\r\n            className: \"table-header\",\r\n        },\r\n        footer: {\r\n            className: \"table-footer\"\r\n        },\r\n        paginator: {\r\n            root: {\r\n                className: classNames([\r\n                    \"p-0 d-flex mb-1 mt-2\",\r\n                    `justify-content-${props.paginatorAlign ?? \"center\"}`\r\n                ]),\r\n                style: { borderTop: \"none\" }\r\n            },\r\n            firstPageButton: {\r\n                style: { borderTopLeftRadius: \"3px\", borderBottomLeftRadius: \"3px\" }\r\n            },\r\n            lastPageButton: {\r\n                style: { borderTopRightRadius: \"3px\", borderBottomRightRadius: \"3px\" }\r\n            }\r\n        }\r\n    };\r\n}\r\n\r\n/**\r\n * Realiza a personalização na COLUNA da tabela\r\n */\r\nexport function bootstrapColumnStyle(): ColumnPassThroughOptions {\r\n\r\n    return {\r\n        sort: {\r\n            className: \"table-sort\"\r\n        },\r\n        headerCell: (options) => {\r\n            return {\r\n                className: classNames([\r\n                    options?.context.sorted ? \"table-sort-active\" : \"\",\r\n                ])\r\n            };\r\n        },\r\n        bodyCell: {\r\n            className: \"table-resizable\"\r\n        },\r\n    };\r\n}","import { Box } from \"../box\";\r\nimport { TableProps } from \"./types\";\r\nimport React, { useState } from \"react\";\r\nimport { tableCore } from \"./core/core\";\r\nimport { tableSort } from \"./core/sort\";\r\nimport { tableGroup } from \"./core/group\";\r\nimport { Column } from \"primereact/column\";\r\nimport { DataTable } from \"primereact/datatable\";\r\nimport { tableSelection } from \"./core/selection\";\r\nimport { tablePagination } from \"./core/pagination\";\r\nimport { bootstrapColumnStyle, bootstrapTableStyle } from \"./styled\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar tabela de dados.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n */\r\nexport function Table<T = any>(props: TableProps<T>) {\r\n    const [expandedRows, setExpandedRows] = useState([]);\r\n\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Box className=\"p-0\"\r\n             size={props.size ?? \"100\"}>\r\n            {/*@ts-ignore*/}\r\n            <DataTable<any>\r\n                pt={{ ...bootstrapTableStyle(props) }}\r\n                tableClassName={props.className}\r\n                {...tableCore(props)}\r\n                {...tableSort(props)}\r\n                {...tableSelection(props)}\r\n                {...tablePagination(props)}\r\n                {...tableGroup(props, expandedRows, setExpandedRows)}>\r\n                {props.selectionMode === \"checkbox\"\r\n                    && <Column align=\"center\"\r\n                               headerStyle={{ width: \"2.5rem\" }}\r\n                               pt={{ ...bootstrapColumnStyle() }}\r\n                               selectionMode=\"multiple\"/>}\r\n                {props.column.map(obj => {\r\n                    return (\r\n                        <Column\r\n                            unstyled\r\n                            align={obj.align}\r\n                            alignFrozen={obj.frozen ? \"right\" : undefined}\r\n                            alignHeader={obj.alignHeader}\r\n                            body={obj.body}\r\n                            field={obj.id}\r\n                            frozen={obj.frozen !== undefined}\r\n                            header={obj.header}\r\n                            key={obj.id}\r\n                            pt={{ ...bootstrapColumnStyle() }}\r\n                            sortable={obj.sort ?? false}\r\n                            style={obj.style}/>\r\n                    );\r\n                })}\r\n            </DataTable>\r\n        </Box>\r\n    );\r\n}"],"names":["Box","children","props","css","size","direction","justify","undefined","Array","isArray","join","align","attr","className","classNames","style","React","createElement","tableCore","value","data","dataKey","lazy","resizableColumns","styleResizable","columnResizeMode","emptyMessage","header","templeteHeader","footer","templateFooter","tableSort","sortField","sortOrder","onSort","event","tableGroup","expandedRows","setExpandedRows","groupRowsBy","rowGroup","rowGroupMode","rowGroupHeaderTemplate","rowGroupFooterTemplate","expandableRowGroups","rowExpandable","onRowToggle","tableSelection","metaKeySelection","onSelection","selection","selectionMode","onSelectionChange","e","tablePagination","paginator","paginatorClassName","totalRecords","paginationTotal","first","paginationPage","paginatorRow","rows","rowsPerPageOptions","paginatorTemplate","layout","CurrentPageReport","options","fontSize","RowsPerPageDropdown","maxWidth","onChange","Number","target","map","obj","key","label","paginatorRight","templatePaginationRight","paginatorLeft","templatePaginationLeft","onPage","onPaginator","bootstrapTableStyle","root","table","styleHover","styleStriped","styleSize","styleType","paginatorAlign","borderTop","firstPageButton","borderTopLeftRadius","borderBottomLeftRadius","lastPageButton","borderTopRightRadius","borderBottomRightRadius","bootstrapColumnStyle","sort","headerCell","context","sorted","bodyCell","useState","DataTable","pt","tableClassName","Column","headerStyle","width","column","unstyled","alignFrozen","frozen","alignHeader","body","field","id","sortable"],"mappings":"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"}

package/table/index.d.ts

@@ -0,0 +1,256 @@
+import React, { CSSProperties } from 'react';
+import { ColumnHeaderOptions, ColumnBodyOptions } from 'primereact/column';
+import { SortOrder } from 'primereact/datatable';
+
+interface TableColumnProps {
+
+    /**
+     * Propriedade de dados de uma linha.
+     */
+    id: string
+
+    /**
+     * Conteúdo do cabeçalho da tabela.
+     */
+    header: React.ReactNode | ((options: ColumnHeaderOptions) => React.ReactNode)
+
+    /**
+     * Alinha o conteúdo da coluna, os valores válidos são à esquerda, à direita e ao centro.
+     */
+    align?: null | "center" | "left" | "right"
+
+    /**
+     * Alinha o header da coluna, os valores válidos são à esquerda, à direita e ao centro.
+     */
+    alignHeader?: null | "center" | "left" | "right"
+
+    /**
+     * Classe de estilo do componente.
+     */
+    className?: string
+
+    /**
+     * Define se o campo vai ser ordernado
+     */
+    sort?: boolean
+
+    /**
+     * Conteúdo do corpo da coluna.
+     */
+    body?: (data: any, options: ColumnBodyOptions) => React.ReactNode
+
+    /**
+     * Define as propriedades `css` para cada coluna
+     */
+    style?: CSSProperties
+
+    /**
+     * Define se coluna vai ser congelada e qual posição
+     */
+    frozen?: boolean
+}
+
+interface TableSortProps {
+    
+    /**
+     * Método para realizar ordernação manual
+     */
+    onSort?(field: string, order: SortOrder): void
+}
+
+interface TableGroupProps {
+    /**
+     * Define a representação do objeto de agrupamento
+     */
+    rowGroup?: string
+
+    /**
+     * Define o tipo de agrupamento da tabela
+     */
+    rowGroupMode?: "subheader" | "rowgroup"
+
+    /**
+     * Define se o agrupamento vai ser expandido ou não
+     */
+    rowExpandable?: boolean
+
+    /**
+     * Define o template do agrupamento - Header
+     */
+    rowGroupHeaderTemplate?: any
+
+    /**
+     * Define o template do agrupamento - Footer
+     */
+    rowGroupFooterTemplate?: any
+}
+
+/**
+ * Define as tipagens `default` de todos os componentes do pacote
+ */
+interface ApiComponentProps {
+
+    /**
+     * Adiciona no atributo `class` do componente o valor atribuido nessa propriedade
+     */
+    className?: string
+
+    /**
+     * Define o tamanho da box do componente de acordo com o valores abaixo
+     */
+    size?: "5" | "10" | "12-5" | "15" | "17-5" | "20" | "22-5" | "25" | "30" | "33" | "35" | "40" | "45" | "50" | "55" | "60" | "65" | "70" | "75" | "80" | "85" | "90" | "95" | "100"
+
+    /**
+     * Define as propriedades css do component `style`
+     */
+    css?: CSSProperties
+}
+
+interface TableStyleProps {
+    /**
+     * Define estilo da tabela como listrada
+     */
+    styleStriped?: boolean
+
+    /**
+     * Define estilo da tabela quando passa mouse sobre a linha da tabela
+     */
+    styleHover?: boolean
+
+    /**
+     * Define se as coluna das tabela por ser redimensionadas
+     */
+    styleResizable?: boolean
+
+    /**
+     * Define estilo da tabela com bordar ou sem borda
+     */
+    styleType?: "bordered" | "borderless"
+
+    /**
+     * Define o tamanho da tabela.
+     */
+    styleSize?: "small"
+}
+
+interface TableTemplateProps {
+    /**
+     * Conteúdo do cabeçalho personalizado.
+     */
+    templeteHeader?: React.ReactNode
+
+    /**
+     * Conteúdo do rodapé personalizado.
+     */
+    templateFooter?: React.ReactNode
+
+    /**
+     * Contéudo personalizado do lado esquerdo do elemento de `paginação`
+     */
+    templatePaginationLeft?: React.ReactNode
+
+    /**
+     * Contéudo personalizado do lado direiro do elemento de `paginação`
+     */
+    templatePaginationRight?: React.ReactNode
+}
+
+interface TableSelectionProps {
+    /**
+     * Objeto selecionando dentro da tabela
+     */
+    selection?: any
+
+    /**
+     * Define qual tipo de seleção
+     */
+    selectionMode?: "single" | "checkbox"
+
+    /**
+     * Realiza a seleção do element
+     */
+    onSelection?(value: any): void
+}
+
+interface TablePaginationProps {
+
+    /**
+     * Define se tabela vai utilizar paginação de resultado
+     */
+    paginator?: boolean
+
+    /**
+     * Define o numero de elemento por página
+     */
+    paginatorRow?: 5 | 10 | 15 | 20 | 25 | 50 | 100
+
+    /**
+     * Define o alinhamento da paginação
+     */
+    paginatorAlign?: "end" | "center" | "start"
+
+    /**
+     * Método para realizar paginação manual
+     */
+    onPaginator?(number: number, elements: number): void
+}
+
+type TableLazyProps = {
+
+    /**
+     * Define qual campo vem com a ordernação padrão do back-end
+     */
+    sortField?: string
+
+    /**
+     * Define qual é o tipo de ordenação padrão do back-end
+     */
+    sortOrder?: SortOrder
+
+    /**
+     * Define qual é paginação inicial
+     */
+    paginationPage?: number
+
+    /**
+     * Define o número total de registro da tabela
+     */
+    paginationTotal?: number
+}
+
+interface TableProps<T> extends TableStyleProps, TableSelectionProps, TableTemplateProps, TableSortProps, TablePaginationProps, TableGroupProps, ApiComponentProps {
+
+    /**
+     * Uma matriz de objeto que renderiza o cabeçalho
+     */
+    column: Array<TableColumnProps>
+
+    /**
+     * Uma matriz de objetos a serem exibidos.
+     */
+    data: Array<T>
+
+    /**
+     * Texto a ser exibido quando não há dados.
+     */
+    emptyMessage?: string
+
+    /**
+     * Define se a gerenciamento da tabela vai ser manual ou dinamica
+     */
+    lazy?: TableLazyProps
+}
+
+/**
+ * Componente - `Table`
+ *
+ * Um componente versátil que pode ser utilizado para criar tabela de dados.
+ * Permite personalizar o estilo e o conteúdo através de propriedades.
+ */
+declare function Table<T = any>(props: TableProps<T>): React.JSX.Element;
+
+type ITableProps<T = any> = TableProps<T>;
+type ITableColumnProps = TableColumnProps;
+type ITableLazyProps = TableLazyProps;
+
+export { type ITableColumnProps, type ITableLazyProps, type ITableProps, Table };

package/table/index.esm.js

@@ -0,0 +1,2 @@
+import e,{useState as t}from"react";import{classNames as o}from"primereact/utils";import{Column as a}from"primereact/column";import{DataTable as r}from"primereact/datatable";const n=({children:t,...a})=>{const r={size:`box-size-${a.size??"100"}`,direction:`box-direction-${a.direction??"row"}`,justify:void 0===a.justify?"":Array.isArray(a.justify)?a.justify?.join(" "):a.justify,align:void 0===a.align?"":Array.isArray(a.align)?a.align?.join(" "):a.align},n={className:o(["box",a.className??"",r.size,r.direction,r.justify,r.align]),style:a.css};return e.createElement("div",{...n},t)};function i(e){return{value:e.data,dataKey:"id",lazy:void 0!==e.lazy,resizableColumns:e.styleResizable??!1,columnResizeMode:"expand",emptyMessage:e.emptyMessage??"Não há informações disponíveis no momento.",header:e.templeteHeader,footer:e.templateFooter}}function l(e){return{sortField:e.lazy?.sortField,sortOrder:e.lazy?.sortOrder??null,onSort:void 0!==e.lazy?function(t){e.onSort&&e.onSort(t.sortField,t.sortOrder)}:void 0}}function s(e,t,o){return{groupRowsBy:e.rowGroup,rowGroupMode:e.rowGroupMode,rowGroupHeaderTemplate:e.rowGroupHeaderTemplate,rowGroupFooterTemplate:e.rowGroupFooterTemplate,expandableRowGroups:e.rowExpandable??!1,expandedRows:t,onRowToggle(e){o(e.data)}}}function d(e){return{metaKeySelection:void 0!==e.onSelection,selection:e.selection,selectionMode:void 0!==e.onSelection?e.selectionMode??"single":void 0,onSelectionChange:function(t){e.onSelection&&e.onSelection(t.value)}}}function p(t){return{paginator:t.paginator??!1,paginatorClassName:"pagination",totalRecords:t?.lazy?.paginationTotal??void 0,first:void 0===t?.lazy?.paginationPage?0:((t?.lazy?.paginationPage??0)-1)*(t.paginatorRow??10),rows:t.paginator?t.paginatorRow??10:void 0,rowsPerPageOptions:[5,10,15,20,50,100],paginatorTemplate:{layout:"RowsPerPageDropdown FirstPageLink PageLinks LastPageLink CurrentPageReport",CurrentPageReport:t=>e.createElement("p",{className:"text-secondary mx-2",style:{fontSize:".9em"}},"Total de registros: ",t.totalRecords),RowsPerPageDropdown:t=>e.createElement("select",{className:"form-select form-select-sm mx-2",style:{maxWidth:"60px"},value:t.value,onChange:e=>{const o={};o.value=Number(e.target.value),t.onChange(o)}},t.options.map((t=>e.createElement("option",{key:t.value,value:t.value},t.label))))},paginatorRight:t.templatePaginationRight,paginatorLeft:t.templatePaginationLeft,onPage:void 0!==t.lazy?function(e){let o=e.first/(t.paginatorRow??10);t.onPaginator&&t.onPaginator(o+1,e.rows)}:void 0}}function c(e){return{root:{className:"table-responsive"},table:{className:o(["table",e.styleHover?"table-hover":"",e.styleStriped?"table-striped":"","small"===e.styleSize?"table-sm":"","bordered"===e.styleType?"table-bordered":"borderless"===e.styleType?"table-borderless":""])},header:{className:"table-header"},footer:{className:"table-footer"},paginator:{root:{className:o(["p-0 d-flex mb-1 mt-2",`justify-content-${e.paginatorAlign??"center"}`]),style:{borderTop:"none"}},firstPageButton:{style:{borderTopLeftRadius:"3px",borderBottomLeftRadius:"3px"}},lastPageButton:{style:{borderTopRightRadius:"3px",borderBottomRightRadius:"3px"}}}}}function m(){return{sort:{className:"table-sort"},headerCell:e=>({className:o([e?.context.sorted?"table-sort-active":""])}),bodyCell:{className:"table-resizable"}}}function u(o){const[u,g]=t([]);return e.createElement(n,{className:"p-0",size:o.size??"100"},e.createElement(r,{pt:{...c(o)},tableClassName:o.className,...i(o),...l(o),...d(o),...p(o),...s(o,u,g)},"checkbox"===o.selectionMode&&e.createElement(a,{align:"center",headerStyle:{width:"2.5rem"},pt:{...m()},selectionMode:"multiple"}),o.column.map((t=>e.createElement(a,{unstyled:!0,align:t.align,alignFrozen:t.frozen?"right":void 0,alignHeader:t.alignHeader,body:t.body,field:t.id,frozen:void 0!==t.frozen,header:t.header,key:t.id,pt:{...m()},sortable:t.sort??!1,style:t.style})))))}export{u as Table};
+//# sourceMappingURL=index.esm.js.map

package/table/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../../src/box/box.tsx","../../src/table/core/core.tsx","../../src/table/core/sort.tsx","../../src/table/core/group.tsx","../../src/table/core/selection.tsx","../../src/table/core/pagination.tsx","../../src/table/styled.ts","../../src/table/table.tsx"],"sourcesContent":["import { BoxProps } from \"./types\";\r\nimport React, { HTMLAttributes } from \"react\";\r\nimport { classNames } from \"primereact/utils\";\r\n\r\n/**\r\n * Componente - `Box`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar seções ou caixas em uma página.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n *\r\n * Exemplo de uso:\r\n * ```tsx\r\n * <Box align=\"align-items-center\"\r\n *      justify=\"justify-content-end\"\r\n *      size=\"25\">\r\n *   ...conteúdo HTML\r\n * </Box>\r\n * ```\r\n */\r\nexport const Box = ({ children, ...props }: BoxProps) => {\r\n    const css = {\r\n        size: `box-size-${(props.size ?? \"100\")}`,\r\n        direction: `box-direction-${props.direction ?? \"row\"}`,\r\n        justify: props.justify === undefined ? \"\" : Array.isArray(props.justify) ? props.justify?.join(\" \") : props.justify,\r\n        align: props.align === undefined ? \"\" : Array.isArray(props.align) ? props.align?.join(\" \") : props.align\r\n    };\r\n\r\n    const attr: HTMLAttributes<\"div\"> & Omit<BoxProps, \"children\"> = {\r\n        className: classNames([\r\n            \"box\",\r\n            props.className ?? \"\",\r\n            css.size,\r\n            css.direction,\r\n            css.justify,\r\n            css.align\r\n        ]),\r\n        style: props.css\r\n    };\r\n\r\n    return (\r\n        <div {...attr as any}>{children}</div>\r\n    );\r\n};","import { TableProps } from \"../types\";\r\nimport { DataTableBaseProps } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo principal da tabela.\r\n */\r\nexport function tableCore(\r\n    props: TableProps<any>\r\n): Partial<DataTableBaseProps<any>> {\r\n    return {\r\n        value: props.data as any,\r\n        dataKey: \"id\",\r\n        lazy: props.lazy !== undefined,\r\n        resizableColumns: props.styleResizable ?? false,\r\n        columnResizeMode: \"expand\",\r\n        emptyMessage: props.emptyMessage ?? \"Não há informações disponíveis no momento.\",\r\n        header: props.templeteHeader,\r\n        footer: props.templateFooter\r\n    };\r\n}","import { TableProps } from \"../types\";\r\nimport { DataTableProps, DataTableStateEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo de ordenação de resultado.\r\n */\r\nexport function tableSort(\r\n    props: TableProps<any>\r\n): Partial<DataTableProps<any>> {\r\n\r\n    function onSort(event: DataTableStateEvent) {\r\n        if (props.onSort) {\r\n            props.onSort(event.sortField, event.sortOrder);\r\n        }\r\n    }\r\n\r\n    return {\r\n        sortField: props.lazy?.sortField,\r\n        sortOrder: props.lazy?.sortOrder ?? null,\r\n        onSort: props.lazy !== undefined ? onSort : undefined\r\n    };\r\n}","import React from \"react\";\r\nimport { TableProps } from \"../types\";\r\nimport { DataTableBaseProps, DataTableRowToggleEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações de agrupamento da tabela.\r\n */\r\nexport function tableGroup(\r\n    props: TableProps<any>,\r\n    expandedRows: any,\r\n    setExpandedRows: React.Dispatch<any>\r\n): Partial<DataTableBaseProps<any>> {\r\n    return {\r\n        groupRowsBy: props.rowGroup,\r\n        rowGroupMode: props.rowGroupMode,\r\n        rowGroupHeaderTemplate: props.rowGroupHeaderTemplate,\r\n        rowGroupFooterTemplate: props.rowGroupFooterTemplate,\r\n        expandableRowGroups: props.rowExpandable ?? false,\r\n        expandedRows: expandedRows,\r\n        onRowToggle(event: DataTableRowToggleEvent) {\r\n            setExpandedRows(event.data);\r\n        }\r\n    };\r\n}","import { TableProps } from \"../types\";\r\nimport { DataTableProps, DataTableSelectionSingleChangeEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo de seleção de dados.\r\n */\r\nexport function tableSelection(\r\n    props: TableProps<any>\r\n): Partial<DataTableProps<any>> {\r\n\r\n    function onSelect(e: DataTableSelectionSingleChangeEvent<any>) {\r\n        if (props.onSelection) {\r\n            props.onSelection(e.value);\r\n        }\r\n    }\r\n\r\n    return {\r\n        metaKeySelection: props.onSelection !== undefined,\r\n        selection: props.selection,\r\n        selectionMode: props.onSelection !== undefined ? (props.selectionMode as any ?? \"single\") : undefined,\r\n        onSelectionChange: onSelect,\r\n    };\r\n}","import React from \"react\";\r\nimport { TableProps } from \"../types\";\r\nimport { PaginatorChangeEvent } from \"primereact/paginator\";\r\nimport { DataTableBaseProps, DataTableStateEvent } from \"primereact/datatable\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Define as configurações do modo de paginação de resultado.\r\n */\r\nexport function tablePagination(\r\n    props: TableProps<any>\r\n): Partial<DataTableBaseProps<any>> {\r\n\r\n    function onPage(event: DataTableStateEvent) {\r\n        let paginationPage = event.first / (props.paginatorRow ?? 10);\r\n        if (props.onPaginator) {\r\n            props.onPaginator(paginationPage + 1, event.rows);\r\n        }\r\n    }\r\n\r\n    return {\r\n        paginator: props.paginator ?? false,\r\n        paginatorClassName: \"pagination\",\r\n        totalRecords: props?.lazy?.paginationTotal ?? undefined,\r\n        first: props?.lazy?.paginationPage === undefined ? 0 : ((props?.lazy?.paginationPage ?? 0) - 1) * (props.paginatorRow ?? 10),\r\n        rows: props.paginator ? (props.paginatorRow ?? 10) : undefined,\r\n        rowsPerPageOptions: [5, 10, 15, 20, 50, 100],\r\n        paginatorTemplate: {\r\n            layout: \"RowsPerPageDropdown FirstPageLink PageLinks LastPageLink CurrentPageReport\",\r\n            CurrentPageReport: options => {\r\n                return (\r\n                    <p className=\"text-secondary mx-2\"\r\n                       style={{ fontSize: \".9em\" }}>Total de registros: {options.totalRecords}</p>\r\n                );\r\n            },\r\n            RowsPerPageDropdown: options => {\r\n                return (\r\n                    <select className=\"form-select form-select-sm mx-2\"\r\n                            style={{ maxWidth: \"60px\" }}\r\n                            value={options.value}\r\n                            onChange={(e) => {\r\n                                const event = {} as PaginatorChangeEvent;\r\n                                // @ts-ignore\r\n                                event.value = Number(e.target.value);\r\n                                options.onChange(event);\r\n                            }}>\r\n                        {options.options.map(obj => <option key={obj.value}\r\n                                                            value={obj.value}>{obj.label}</option>)}\r\n                    </select>\r\n                );\r\n            }\r\n        },\r\n        paginatorRight: props.templatePaginationRight,\r\n        paginatorLeft: props.templatePaginationLeft,\r\n        onPage: props.lazy !== undefined ? onPage : undefined,\r\n    };\r\n}","import { TableProps } from \"./types\";\r\nimport { classNames } from \"primereact/utils\";\r\nimport { ColumnPassThroughOptions } from \"primereact/column\";\r\nimport { DataTablePassThroughOptions } from \"primereact/datatable\";\r\n\r\n/**\r\n * Realiza a personalização na TABLE\r\n */\r\nexport function bootstrapTableStyle(props: TableProps<any>): DataTablePassThroughOptions {\r\n    return {\r\n        root: {\r\n            className: \"table-responsive\"\r\n        },\r\n        table: {\r\n            className: classNames([\r\n                \"table\",\r\n                props.styleHover ? \"table-hover\" : \"\",\r\n                props.styleStriped ? \"table-striped\" : \"\",\r\n                props.styleSize === \"small\" ? \"table-sm\" : \"\",\r\n                props.styleType === \"bordered\" ? \"table-bordered\" : props.styleType === \"borderless\" ? \"table-borderless\" : \"\",\r\n            ]),\r\n        },\r\n        header: {\r\n            className: \"table-header\",\r\n        },\r\n        footer: {\r\n            className: \"table-footer\"\r\n        },\r\n        paginator: {\r\n            root: {\r\n                className: classNames([\r\n                    \"p-0 d-flex mb-1 mt-2\",\r\n                    `justify-content-${props.paginatorAlign ?? \"center\"}`\r\n                ]),\r\n                style: { borderTop: \"none\" }\r\n            },\r\n            firstPageButton: {\r\n                style: { borderTopLeftRadius: \"3px\", borderBottomLeftRadius: \"3px\" }\r\n            },\r\n            lastPageButton: {\r\n                style: { borderTopRightRadius: \"3px\", borderBottomRightRadius: \"3px\" }\r\n            }\r\n        }\r\n    };\r\n}\r\n\r\n/**\r\n * Realiza a personalização na COLUNA da tabela\r\n */\r\nexport function bootstrapColumnStyle(): ColumnPassThroughOptions {\r\n\r\n    return {\r\n        sort: {\r\n            className: \"table-sort\"\r\n        },\r\n        headerCell: (options) => {\r\n            return {\r\n                className: classNames([\r\n                    options?.context.sorted ? \"table-sort-active\" : \"\",\r\n                ])\r\n            };\r\n        },\r\n        bodyCell: {\r\n            className: \"table-resizable\"\r\n        },\r\n    };\r\n}","import { Box } from \"../box\";\r\nimport { TableProps } from \"./types\";\r\nimport React, { useState } from \"react\";\r\nimport { tableCore } from \"./core/core\";\r\nimport { tableSort } from \"./core/sort\";\r\nimport { tableGroup } from \"./core/group\";\r\nimport { Column } from \"primereact/column\";\r\nimport { DataTable } from \"primereact/datatable\";\r\nimport { tableSelection } from \"./core/selection\";\r\nimport { tablePagination } from \"./core/pagination\";\r\nimport { bootstrapColumnStyle, bootstrapTableStyle } from \"./styled\";\r\n\r\n/**\r\n * Componente - `Table`\r\n *\r\n * Um componente versátil que pode ser utilizado para criar tabela de dados.\r\n * Permite personalizar o estilo e o conteúdo através de propriedades.\r\n */\r\nexport function Table<T = any>(props: TableProps<T>) {\r\n    const [expandedRows, setExpandedRows] = useState([]);\r\n\r\n    /*\r\n    |------------------------------------------\r\n    | render() - Renderização do componente\r\n    |------------------------------------------\r\n    */\r\n    return (\r\n        <Box className=\"p-0\"\r\n             size={props.size ?? \"100\"}>\r\n            {/*@ts-ignore*/}\r\n            <DataTable<any>\r\n                pt={{ ...bootstrapTableStyle(props) }}\r\n                tableClassName={props.className}\r\n                {...tableCore(props)}\r\n                {...tableSort(props)}\r\n                {...tableSelection(props)}\r\n                {...tablePagination(props)}\r\n                {...tableGroup(props, expandedRows, setExpandedRows)}>\r\n                {props.selectionMode === \"checkbox\"\r\n                    && <Column align=\"center\"\r\n                               headerStyle={{ width: \"2.5rem\" }}\r\n                               pt={{ ...bootstrapColumnStyle() }}\r\n                               selectionMode=\"multiple\"/>}\r\n                {props.column.map(obj => {\r\n                    return (\r\n                        <Column\r\n                            unstyled\r\n                            align={obj.align}\r\n                            alignFrozen={obj.frozen ? \"right\" : undefined}\r\n                            alignHeader={obj.alignHeader}\r\n                            body={obj.body}\r\n                            field={obj.id}\r\n                            frozen={obj.frozen !== undefined}\r\n                            header={obj.header}\r\n                            key={obj.id}\r\n                            pt={{ ...bootstrapColumnStyle() }}\r\n                            sortable={obj.sort ?? false}\r\n                            style={obj.style}/>\r\n                    );\r\n                })}\r\n            </DataTable>\r\n        </Box>\r\n    );\r\n}"],"names":["Box","children","props","css","size","direction","justify","undefined","Array","isArray","join","align","attr","className","classNames","style","React","createElement","tableCore","value","data","dataKey","lazy","resizableColumns","styleResizable","columnResizeMode","emptyMessage","header","templeteHeader","footer","templateFooter","tableSort","sortField","sortOrder","onSort","event","tableGroup","expandedRows","setExpandedRows","groupRowsBy","rowGroup","rowGroupMode","rowGroupHeaderTemplate","rowGroupFooterTemplate","expandableRowGroups","rowExpandable","onRowToggle","tableSelection","metaKeySelection","onSelection","selection","selectionMode","onSelectionChange","e","tablePagination","paginator","paginatorClassName","totalRecords","paginationTotal","first","paginationPage","paginatorRow","rows","rowsPerPageOptions","paginatorTemplate","layout","CurrentPageReport","options","fontSize","RowsPerPageDropdown","maxWidth","onChange","Number","target","map","obj","key","label","paginatorRight","templatePaginationRight","paginatorLeft","templatePaginationLeft","onPage","onPaginator","bootstrapTableStyle","root","table","styleHover","styleStriped","styleSize","styleType","paginatorAlign","borderTop","firstPageButton","borderTopLeftRadius","borderBottomLeftRadius","lastPageButton","borderTopRightRadius","borderBottomRightRadius","bootstrapColumnStyle","sort","headerCell","context","sorted","bodyCell","Table","useState","DataTable","pt","tableClassName","Column","headerStyle","width","column","unstyled","alignFrozen","frozen","alignHeader","body","field","id","sortable"],"mappings":"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"}

package/table/package.json

@@ -0,0 +1,5 @@
+{
+  "main": "./index.cjs.js",
+  "module": "./index.esm.js",
+  "types": "./index.d.ts"
+}