@economic/taco 2.26.9 → 2.26.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.css +33 -0
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableStyleGrid.js +9 -4
- package/dist/esm/packages/taco/src/primitives/Table/Core/features/useTableStyleGrid.js.map +1 -1
- package/dist/index.css +33 -0
- package/dist/taco.cjs.development.js +8 -3
- package/dist/taco.cjs.development.js.map +1 -1
- package/dist/taco.cjs.production.min.js +1 -1
- package/dist/taco.cjs.production.min.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.css
CHANGED
|
@@ -823,6 +823,14 @@ table[data-taco^='table'][data-table-font-size='small']
|
|
|
823
823
|
@apply !h-4 !w-4;
|
|
824
824
|
}
|
|
825
825
|
|
|
826
|
+
table[data-taco^='table'][data-table-font-size='small'] td [role='combobox'] {
|
|
827
|
+
@apply !flex;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
table[data-taco^='table'][data-table-font-size='small'] td [role='combobox'] [data-taco='input'] {
|
|
831
|
+
@apply !pr-7;
|
|
832
|
+
}
|
|
833
|
+
|
|
826
834
|
table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox'],
|
|
827
835
|
table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox-container'],
|
|
828
836
|
table[data-taco^='table'][data-table-font-size='small'] td [data-taco='switch'],
|
|
@@ -853,6 +861,14 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='tag'] {
|
|
|
853
861
|
@apply !-my-0.5;
|
|
854
862
|
}
|
|
855
863
|
|
|
864
|
+
table[data-taco^='table'][data-table-font-size='medium'] td [role='combobox'] {
|
|
865
|
+
@apply !flex;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
table[data-taco^='table'][data-table-font-size='medium'] td [role='combobox'] [data-taco='input'] {
|
|
869
|
+
@apply !pr-9;
|
|
870
|
+
}
|
|
871
|
+
|
|
856
872
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='select2-container'],
|
|
857
873
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='Select2'],
|
|
858
874
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='input'],
|
|
@@ -860,6 +876,11 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='textarea
|
|
|
860
876
|
@apply !-mx-[9px] !-my-[6px] !min-h-[theme(spacing.8)] !w-[calc(100%_+_16px)] focus:z-10;
|
|
861
877
|
}
|
|
862
878
|
|
|
879
|
+
table[data-taco^='table'][data-table-font-size='medium'] td[data-cell-align='right'] [data-taco='input'],
|
|
880
|
+
table[data-taco^='table'][data-table-font-size='medium'] td[data-cell-align='right'] [data-taco='textarea'] {
|
|
881
|
+
@apply pr-1.5;
|
|
882
|
+
}
|
|
883
|
+
|
|
863
884
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='select2-container'] [data-taco='Select2'] {
|
|
864
885
|
@apply !m-auto !w-full;
|
|
865
886
|
}
|
|
@@ -898,6 +919,14 @@ table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='icon']
|
|
|
898
919
|
@apply !-my-0.5;
|
|
899
920
|
}
|
|
900
921
|
|
|
922
|
+
table[data-taco^='table'][data-table-font-size='large'] td [role='combobox'] {
|
|
923
|
+
@apply !flex;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
table[data-taco^='table'][data-table-font-size='large'] td [role='combobox'] [data-taco='input'] {
|
|
927
|
+
@apply !pr-11;
|
|
928
|
+
}
|
|
929
|
+
|
|
901
930
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='select2-container'],
|
|
902
931
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='Select2'],
|
|
903
932
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input'],
|
|
@@ -931,6 +960,10 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'
|
|
|
931
960
|
@apply h-10 px-2.5 text-base;
|
|
932
961
|
}
|
|
933
962
|
|
|
963
|
+
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'] {
|
|
964
|
+
@apply !pb-[8px] !leading-6;
|
|
965
|
+
}
|
|
966
|
+
|
|
934
967
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
|
|
935
968
|
@apply !-mr-[19px] !h-10 !w-10;
|
|
936
969
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import React__default from 'react';
|
|
2
|
-
import { getCellMinWidth } from '../../useTableManager/util/columns.js';
|
|
2
|
+
import { isInternalColumn, getCellMinWidth } from '../../useTableManager/util/columns.js';
|
|
3
3
|
|
|
4
4
|
function useTableStyleGrid(tableId, table, fontSize) {
|
|
5
5
|
const tableMeta = table.options.meta;
|
|
@@ -20,9 +20,14 @@ function useTableStyleGrid(tableId, table, fontSize) {
|
|
|
20
20
|
const width = columnSizing[column.id];
|
|
21
21
|
let size;
|
|
22
22
|
let printSize;
|
|
23
|
-
if (column.id
|
|
24
|
-
|
|
25
|
-
|
|
23
|
+
if (isInternalColumn(column.id)) {
|
|
24
|
+
if (column.id === '__actions') {
|
|
25
|
+
const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
|
|
26
|
+
size = `minmax(${minWidth}px, auto)`;
|
|
27
|
+
} else {
|
|
28
|
+
// getSize method is used instead of columnSizing state because internal columns have defined widths
|
|
29
|
+
size = `${column.getSize()}px`;
|
|
30
|
+
}
|
|
26
31
|
} else if (width !== undefined) {
|
|
27
32
|
const isLastColumn = index === allVisibleColumns.length - 1;
|
|
28
33
|
if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useTableStyleGrid.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableStyleGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableFontSize } from '../../types';\nimport { getCellMinWidth } from '../../useTableManager/util/columns';\n\nexport function useTableStyleGrid<TType = unknown>(tableId: string, table: ReactTable<TType>, fontSize: TableFontSize) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const globalMinSize = getCellMinWidth(fontSize);\n\n // header body ?footer\n const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';\n\n return React.useMemo(() => {\n let printGridTemplateColumns = '';\n const printHiddenColumns: string[] = [];\n\n const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {\n if (table.options.enableGrouping && column.getIsGrouped()) {\n return accum;\n }\n\n const minSize = column.columnDef.minSize ?? globalMinSize;\n const width = columnSizing[column.id] as number | 'grow';\n\n let size;\n let printSize;\n\n if (column.id === '__actions') {\n
|
|
1
|
+
{"version":3,"file":"useTableStyleGrid.js","sources":["../../../../../../../../../src/primitives/Table/Core/features/useTableStyleGrid.ts"],"sourcesContent":["import React from 'react';\nimport { Table as ReactTable, TableMeta as ReactTableMeta } from '@tanstack/react-table';\nimport { TableFontSize } from '../../types';\nimport { getCellMinWidth, isInternalColumn } from '../../useTableManager/util/columns';\n\nexport function useTableStyleGrid<TType = unknown>(tableId: string, table: ReactTable<TType>, fontSize: TableFontSize) {\n const tableMeta = table.options.meta as ReactTableMeta<TType>;\n const allVisibleColumns = table.getVisibleLeafColumns();\n const columnSizing = table.getState().columnSizing;\n const globalMinSize = getCellMinWidth(fontSize);\n\n // header body ?footer\n const gridTemplateRows = table.getRowModel().rows.length ? 'min-content 1fr min-content' : 'min-content 1fr';\n\n return React.useMemo(() => {\n let printGridTemplateColumns = '';\n const printHiddenColumns: string[] = [];\n\n const gridTemplateColumns = allVisibleColumns.reduce((accum, column, index) => {\n if (table.options.enableGrouping && column.getIsGrouped()) {\n return accum;\n }\n\n const minSize = column.columnDef.minSize ?? globalMinSize;\n const width = columnSizing[column.id] as number | 'grow';\n\n let size;\n let printSize;\n\n if (isInternalColumn(column.id)) {\n if (column.id === '__actions') {\n const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */\n size = `minmax(${minWidth}px, auto)`;\n } else {\n // getSize method is used instead of columnSizing state because internal columns have defined widths\n size = `${column.getSize()}px`;\n }\n } else if (width !== undefined) {\n const isLastColumn = index === allVisibleColumns.length - 1;\n\n if (width === 'grow' || (Number.isNaN(width) && !isLastColumn)) {\n size = `minmax(max-content, 1fr)`;\n } else {\n const minWidth = width < minSize ? minSize : width;\n\n if (isLastColumn) {\n size = `minmax(${minWidth}px, auto)`;\n } else {\n size = `${minWidth}px`;\n }\n }\n } else {\n size = `minmax(max-content, auto)`;\n }\n\n if (column.columnDef.meta?.enablePrinting === false) {\n printSize = '';\n printHiddenColumns.push(column.id);\n } else {\n printSize = 'auto';\n }\n\n printGridTemplateColumns = `${printGridTemplateColumns} ${printSize}`.trim();\n\n return `${accum} ${size}`.trim();\n }, '');\n\n // we have to be specific so that nested tables don't inherit the same css\n const hiddenColumns = printHiddenColumns\n .map(\n id =>\n `table[data-taco^='table']#${tableId} > thead > tr > th[data-cell-id='${id}']\\n,table[data-taco^='table']#${tableId} > tbody > tr > td[data-cell-id='${id}']\\n`\n )\n .join(',');\n\n const style: React.CSSProperties = {\n gridTemplateColumns,\n gridTemplateRows,\n };\n\n const stylesheet = `@media print { table[data-taco^='table']#${tableId} { grid-template-columns: ${printGridTemplateColumns}; } ${\n hiddenColumns ? `${hiddenColumns} { display: none; }` : ''\n }}`;\n\n return { style, stylesheet };\n }, [allVisibleColumns, columnSizing, globalMinSize, tableMeta.rowActions.rowActionsLength]);\n}\n"],"names":["useTableStyleGrid","tableId","table","fontSize","tableMeta","options","meta","allVisibleColumns","getVisibleLeafColumns","columnSizing","getState","globalMinSize","getCellMinWidth","gridTemplateRows","getRowModel","rows","length","React","useMemo","printGridTemplateColumns","printHiddenColumns","gridTemplateColumns","reduce","accum","column","index","enableGrouping","getIsGrouped","minSize","_column$columnDef$min","columnDef","width","id","size","printSize","isInternalColumn","minWidth","rowActions","rowActionsLength","getSize","undefined","isLastColumn","Number","isNaN","_column$columnDef$met","enablePrinting","push","trim","hiddenColumns","map","join","style","stylesheet"],"mappings":";;;SAKgBA,iBAAiBA,CAAkBC,OAAe,EAAEC,KAAwB,EAAEC,QAAuB;EACjH,MAAMC,SAAS,GAAGF,KAAK,CAACG,OAAO,CAACC,IAA6B;EAC7D,MAAMC,iBAAiB,GAAGL,KAAK,CAACM,qBAAqB,EAAE;EACvD,MAAMC,YAAY,GAAGP,KAAK,CAACQ,QAAQ,EAAE,CAACD,YAAY;EAClD,MAAME,aAAa,GAAGC,eAAe,CAACT,QAAQ,CAAC;;EAG/C,MAAMU,gBAAgB,GAAGX,KAAK,CAACY,WAAW,EAAE,CAACC,IAAI,CAACC,MAAM,GAAG,6BAA6B,GAAG,iBAAiB;EAE5G,OAAOC,cAAK,CAACC,OAAO,CAAC;IACjB,IAAIC,wBAAwB,GAAG,EAAE;IACjC,MAAMC,kBAAkB,GAAa,EAAE;IAEvC,MAAMC,mBAAmB,GAAGd,iBAAiB,CAACe,MAAM,CAAC,CAACC,KAAK,EAAEC,MAAM,EAAEC,KAAK;;MACtE,IAAIvB,KAAK,CAACG,OAAO,CAACqB,cAAc,IAAIF,MAAM,CAACG,YAAY,EAAE,EAAE;QACvD,OAAOJ,KAAK;;MAGhB,MAAMK,OAAO,IAAAC,qBAAA,GAAGL,MAAM,CAACM,SAAS,CAACF,OAAO,cAAAC,qBAAA,cAAAA,qBAAA,GAAIlB,aAAa;MACzD,MAAMoB,KAAK,GAAGtB,YAAY,CAACe,MAAM,CAACQ,EAAE,CAAoB;MAExD,IAAIC,IAAI;MACR,IAAIC,SAAS;MAEb,IAAIC,gBAAgB,CAACX,MAAM,CAACQ,EAAE,CAAC,EAAE;QAC7B,IAAIR,MAAM,CAACQ,EAAE,KAAK,WAAW,EAAE;UAC3B,MAAMI,QAAQ,GAAGhC,SAAS,CAACiC,UAAU,CAACC,gBAAgB,GAAG,EAAE,GAAG,CAAC,CAAC;UAChEL,IAAI,aAAaG,mBAAmB;SACvC,MAAM;;UAEHH,IAAI,MAAMT,MAAM,CAACe,OAAO,MAAM;;OAErC,MAAM,IAAIR,KAAK,KAAKS,SAAS,EAAE;QAC5B,MAAMC,YAAY,GAAGhB,KAAK,KAAKlB,iBAAiB,CAACS,MAAM,GAAG,CAAC;QAE3D,IAAIe,KAAK,KAAK,MAAM,IAAKW,MAAM,CAACC,KAAK,CAACZ,KAAK,CAAC,IAAI,CAACU,YAAa,EAAE;UAC5DR,IAAI,6BAA6B;SACpC,MAAM;UACH,MAAMG,QAAQ,GAAGL,KAAK,GAAGH,OAAO,GAAGA,OAAO,GAAGG,KAAK;UAElD,IAAIU,YAAY,EAAE;YACdR,IAAI,aAAaG,mBAAmB;WACvC,MAAM;YACHH,IAAI,MAAMG,YAAY;;;OAGjC,MAAM;QACHH,IAAI,8BAA8B;;MAGtC,IAAI,EAAAW,qBAAA,GAAApB,MAAM,CAACM,SAAS,CAACxB,IAAI,cAAAsC,qBAAA,uBAArBA,qBAAA,CAAuBC,cAAc,MAAK,KAAK,EAAE;QACjDX,SAAS,GAAG,EAAE;QACdd,kBAAkB,CAAC0B,IAAI,CAACtB,MAAM,CAACQ,EAAE,CAAC;OACrC,MAAM;QACHE,SAAS,GAAG,MAAM;;MAGtBf,wBAAwB,MAAMA,4BAA4Be,WAAW,CAACa,IAAI,EAAE;MAE5E,UAAUxB,SAASU,MAAM,CAACc,IAAI,EAAE;KACnC,EAAE,EAAE,CAAC;;IAGN,MAAMC,aAAa,GAAG5B,kBAAkB,CACnC6B,GAAG,CACAjB,EAAE,iCAC+B/B,2CAA2C+B,oCAAoC/B,2CAA2C+B,QAAQ,CACtK,CACAkB,IAAI,CAAC,GAAG,CAAC;IAEd,MAAMC,KAAK,GAAwB;MAC/B9B,mBAAmB;MACnBR;KACH;IAED,MAAMuC,UAAU,+CAA+CnD,oCAAoCkB,+BAC/F6B,aAAa,MAAMA,kCAAkC,GAAG,KACzD;IAEH,OAAO;MAAEG,KAAK;MAAEC;KAAY;GAC/B,EAAE,CAAC7C,iBAAiB,EAAEE,YAAY,EAAEE,aAAa,EAAEP,SAAS,CAACiC,UAAU,CAACC,gBAAgB,CAAC,CAAC;AAC/F;;;;"}
|
package/dist/index.css
CHANGED
|
@@ -823,6 +823,14 @@ table[data-taco^='table'][data-table-font-size='small']
|
|
|
823
823
|
@apply !h-4 !w-4;
|
|
824
824
|
}
|
|
825
825
|
|
|
826
|
+
table[data-taco^='table'][data-table-font-size='small'] td [role='combobox'] {
|
|
827
|
+
@apply !flex;
|
|
828
|
+
}
|
|
829
|
+
|
|
830
|
+
table[data-taco^='table'][data-table-font-size='small'] td [role='combobox'] [data-taco='input'] {
|
|
831
|
+
@apply !pr-7;
|
|
832
|
+
}
|
|
833
|
+
|
|
826
834
|
table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox'],
|
|
827
835
|
table[data-taco^='table'][data-table-font-size='small'] td [data-taco='checkbox-container'],
|
|
828
836
|
table[data-taco^='table'][data-table-font-size='small'] td [data-taco='switch'],
|
|
@@ -853,6 +861,14 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='tag'] {
|
|
|
853
861
|
@apply !-my-0.5;
|
|
854
862
|
}
|
|
855
863
|
|
|
864
|
+
table[data-taco^='table'][data-table-font-size='medium'] td [role='combobox'] {
|
|
865
|
+
@apply !flex;
|
|
866
|
+
}
|
|
867
|
+
|
|
868
|
+
table[data-taco^='table'][data-table-font-size='medium'] td [role='combobox'] [data-taco='input'] {
|
|
869
|
+
@apply !pr-9;
|
|
870
|
+
}
|
|
871
|
+
|
|
856
872
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='select2-container'],
|
|
857
873
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='Select2'],
|
|
858
874
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='input'],
|
|
@@ -860,6 +876,11 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='textarea
|
|
|
860
876
|
@apply !-mx-[9px] !-my-[6px] !min-h-[theme(spacing.8)] !w-[calc(100%_+_16px)] focus:z-10;
|
|
861
877
|
}
|
|
862
878
|
|
|
879
|
+
table[data-taco^='table'][data-table-font-size='medium'] td[data-cell-align='right'] [data-taco='input'],
|
|
880
|
+
table[data-taco^='table'][data-table-font-size='medium'] td[data-cell-align='right'] [data-taco='textarea'] {
|
|
881
|
+
@apply pr-1.5;
|
|
882
|
+
}
|
|
883
|
+
|
|
863
884
|
table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='select2-container'] [data-taco='Select2'] {
|
|
864
885
|
@apply !m-auto !w-full;
|
|
865
886
|
}
|
|
@@ -898,6 +919,14 @@ table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='icon']
|
|
|
898
919
|
@apply !-my-0.5;
|
|
899
920
|
}
|
|
900
921
|
|
|
922
|
+
table[data-taco^='table'][data-table-font-size='large'] td [role='combobox'] {
|
|
923
|
+
@apply !flex;
|
|
924
|
+
}
|
|
925
|
+
|
|
926
|
+
table[data-taco^='table'][data-table-font-size='large'] td [role='combobox'] [data-taco='input'] {
|
|
927
|
+
@apply !pr-11;
|
|
928
|
+
}
|
|
929
|
+
|
|
901
930
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='select2-container'],
|
|
902
931
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='Select2'],
|
|
903
932
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input'],
|
|
@@ -931,6 +960,10 @@ table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'
|
|
|
931
960
|
@apply h-10 px-2.5 text-base;
|
|
932
961
|
}
|
|
933
962
|
|
|
963
|
+
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='textarea'] {
|
|
964
|
+
@apply !pb-[8px] !leading-6;
|
|
965
|
+
}
|
|
966
|
+
|
|
934
967
|
table[data-taco^='table'][data-table-font-size='large'] td [data-taco='input-container'] [data-affix-type='postfix'] button {
|
|
935
968
|
@apply !-mr-[19px] !h-10 !w-10;
|
|
936
969
|
}
|
|
@@ -10936,9 +10936,14 @@ function useTableStyleGrid(tableId, table, fontSize) {
|
|
|
10936
10936
|
const width = columnSizing[column.id];
|
|
10937
10937
|
let size;
|
|
10938
10938
|
let printSize;
|
|
10939
|
-
if (column.id
|
|
10940
|
-
|
|
10941
|
-
|
|
10939
|
+
if (isInternalColumn(column.id)) {
|
|
10940
|
+
if (column.id === '__actions') {
|
|
10941
|
+
const minWidth = tableMeta.rowActions.rowActionsLength * 32 + 8; /* button margins l+r */
|
|
10942
|
+
size = `minmax(${minWidth}px, auto)`;
|
|
10943
|
+
} else {
|
|
10944
|
+
// getSize method is used instead of columnSizing state because internal columns have defined widths
|
|
10945
|
+
size = `${column.getSize()}px`;
|
|
10946
|
+
}
|
|
10942
10947
|
} else if (width !== undefined) {
|
|
10943
10948
|
const isLastColumn = index === allVisibleColumns.length - 1;
|
|
10944
10949
|
if (width === 'grow' || Number.isNaN(width) && !isLastColumn) {
|