@infineon/infineon-design-system-stencil 33.1.0--canary.1811.30920a15fa8b5702945cd4d384e2119f38dd1c6a.0 → 33.1.0--canary.1811.4ac04cfa69fd0fdda43c50ce117eefa120588bc0.0
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.
|
@@ -190,7 +190,8 @@ const DefaultTemplate = (args) => {
|
|
|
190
190
|
table-height="${args.tableHeight}"
|
|
191
191
|
pagination="${args.pagination}"
|
|
192
192
|
pagination-page-size="${args.paginationPageSize}"
|
|
193
|
-
filter-orientation="${args.filterOrientation}"
|
|
193
|
+
filter-orientation="${args.filterOrientation}"
|
|
194
|
+
variant='${args.variant}'>
|
|
194
195
|
</ifx-table>`;
|
|
195
196
|
return table;
|
|
196
197
|
}
|
|
@@ -272,8 +273,7 @@ const CustomCellTemplate = (args) => {
|
|
|
272
273
|
table-height="${args.tableHeight}"
|
|
273
274
|
pagination="${args.pagination}"
|
|
274
275
|
pagination-page-size="${args.paginationPageSize}"
|
|
275
|
-
filter-orientation="${args.filterOrientation}"
|
|
276
|
-
variant='${args.variant}'>
|
|
276
|
+
filter-orientation="${args.filterOrientation}">
|
|
277
277
|
</ifx-table>`;
|
|
278
278
|
return table;
|
|
279
279
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const columnDefs = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' }\n];\n\nconst rowData = [\n { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n { make: 'Bmw', model: 'x', price: 72000 },\n { make: 'Mercedes', model: 'y', price: 72000 },\n { make: 'Ferrari', model: 'z', price: 72000 },\n { make: 'Chrysler', model: 'a', price: 72000 },\n { make: 'Range rover', model: 'b', price: 72000 },\n { make: 'Tesla', model: 'x', price: 72000 },\n { make: 'Audi', model: '3', price: 72000 },\n { make: 'Landrover', model: 'x', price: 72000 },\n];\n\nconst columnDefsWithButtonCol = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' },\n {\n headerName: '',\n field: 'button',\n }\n];\n\n\nconst rowDataWithButtonCol = [\n {\n make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Toyota Button\"\n }\n },\n {\n make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Ford Button\"\n }\n },\n {\n make: 'Porsche', model: 'Boxster', price: 72000, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Porsche Button\"\n }\n }\n];\n\nexport default {\n title: 'Components/Table (advanced)',\n args: {\n tableHeight: 'auto',\n pagination: false,\n paginationPageSize: 10,\n rowHeight: 40,\n showLoading: false,\n variant: 'default'\n },\n argTypes: {\n tableHeight: {\n description: 'Set the height of the table.',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Options',\n detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n }\n },\n },\n pagination: {\n description: 'Show pagination control.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: true\n },\n type: {\n summary: 'Boolean',\n },\n },\n },\n paginationPageSize: {\n description: \"Results per page: minimum 10 - maximum 30.\",\n control: { type: 'number', min: 10, max: 30, step: 10 },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 10\n },\n type: {\n summary: 'Number',\n },\n },\n },\n showLoading: {\n description: 'Show loading spinner.',\n options: [true, false],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: false\n },\n },\n },\n rowHeight: {\n description: 'Set the height of the rows.',\n options: ['compact', 'default'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 'default'\n },\n },\n },\n filterOrientation: {\n description: 'Set the filter orientation.',\n options: ['sidebar', 'topbar', 'none'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 'none'\n },\n },\n },\n columnDefs: {\n description: 'Column header options',\n name: 'cols',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Column header options',\n detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n },\n },\n },\n rowData: {\n description: 'Row data options',\n name: 'rows',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Row data options',\n detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n },\n },\n },\n variant: {\n description: 'Sets the variant of the table.',\n table: {\n category: 'ifx-table props',\n defaultValue: { summary: 'default' },\n },\n options: ['default', 'zebra'],\n control: { type: 'radio' },\n },\n }\n};\n\n\n\nconst DefaultTemplate = (args) => {\n if (args.filterOrientation === 'none') {\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n</ifx-table>`;\n return table;\n } else {\n //sidebar\n const filterAccordions = args.columnDefs.map(column => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const filterOptions = uniqueColValues.map((option, index) => {\n return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"false\"></ifx-list-entry>`;\n }).join('');\n\n return `\n <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"6\">\n ${filterOptions}\n </ifx-list>\n </ifx-filter-accordion>\n `;\n }).join('');\n\n //topbar\n const filterComponents = args.columnDefs.map((column, index) => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const options = uniqueColValues.map(option => ({\n value: option,\n label: option,\n selected: false\n }));\n\n // Directly use JSON.stringify without replacing quotes\n const optionsString = JSON.stringify(options);\n\n return `\n <ifx-set-filter slot=\"filter-component-${index + 1}\"\n options='${optionsString}' \n filter-label='${column.headerName}'\n filter-name='${column.field}'\n type='multi-select'\n search-enabled='true'>\n </ifx-set-filter>\n `;\n }).join('\\n');\n\n\n\n const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n <div slot=\"filter-search\">\n <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n </div>\n ${filterAccordions}\n </ifx-filter-type-group>`\n :\n `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"3\">\n <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n ${filterComponents}\n </ifx-filter-bar>`;\n\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n ${filterTypeGroupComponent}\n</ifx-table>`;\n\n return table;\n }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n pagination: true,\n paginationPageSize: 10,\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'none',\n};\n\n\nconst CustomCellTemplate = (args) => {\n const table = `\n <ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\"\n variant='${args.variant}'>\n </ifx-table>`;\n return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n rowHeight: 'default',\n columnDefs: columnDefsWithButtonCol,\n rowData: rowDataWithButtonCol,\n filterOrientation: 'none',\n pagination: false,\n paginationPageSize: 10,\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'sidebar',\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'topbar',\n};\n"]}
|
|
1
|
+
{"version":3,"file":"table.stories.js","sourceRoot":"","sources":["../../../src/components/table-advanced-version/table.stories.ts"],"names":[],"mappings":"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","sourcesContent":["const columnDefs = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' }\n];\n\nconst rowData = [\n { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },\n { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },\n { make: 'Porsche', model: 'Boxster', price: 72000 },\n { make: 'Bmw', model: 'x', price: 72000 },\n { make: 'Mercedes', model: 'y', price: 72000 },\n { make: 'Ferrari', model: 'z', price: 72000 },\n { make: 'Chrysler', model: 'a', price: 72000 },\n { make: 'Range rover', model: 'b', price: 72000 },\n { make: 'Tesla', model: 'x', price: 72000 },\n { make: 'Audi', model: '3', price: 72000 },\n { make: 'Landrover', model: 'x', price: 72000 },\n];\n\nconst columnDefsWithButtonCol = [\n { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },\n { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },\n { headerName: 'Price', field: 'price' },\n { headerName: 'Age', field: 'age' },\n {\n headerName: '',\n field: 'button',\n }\n];\n\n\nconst rowDataWithButtonCol = [\n {\n make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Toyota Button\"\n }\n },\n {\n make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Ford Button\"\n }\n },\n {\n make: 'Porsche', model: 'Boxster', price: 72000, button: {\n disabled: false,\n variant: \"secondary\",\n size: \"s\",\n target: \"_blank\",\n href: \"https://www.w3schools.com/\",\n theme: \"default\",\n type: \"button\",\n fullWidth: true,\n text: \"Porsche Button\"\n }\n }\n];\n\nexport default {\n title: 'Components/Table (advanced)',\n args: {\n tableHeight: 'auto',\n pagination: false,\n paginationPageSize: 10,\n rowHeight: 40,\n showLoading: false,\n variant: 'default'\n },\n argTypes: {\n tableHeight: {\n description: 'Set the height of the table.',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Options',\n detail: 'Default: \"auto\"\\nExample for fixed height: \"400px\"',\n }\n },\n },\n pagination: {\n description: 'Show pagination control.',\n control: { type: 'boolean' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: true\n },\n type: {\n summary: 'Boolean',\n },\n },\n },\n paginationPageSize: {\n description: \"Results per page: minimum 10 - maximum 30.\",\n control: { type: 'number', min: 10, max: 30, step: 10 },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 10\n },\n type: {\n summary: 'Number',\n },\n },\n },\n showLoading: {\n description: 'Show loading spinner.',\n options: [true, false],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: false\n },\n },\n },\n rowHeight: {\n description: 'Set the height of the rows.',\n options: ['compact', 'default'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 'default'\n },\n },\n },\n filterOrientation: {\n description: 'Set the filter orientation.',\n options: ['sidebar', 'topbar', 'none'],\n control: { type: 'radio' },\n table: {\n category: 'ifx-table props',\n defaultValue: {\n summary: 'none'\n },\n },\n },\n columnDefs: {\n description: 'Column header options',\n name: 'cols',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Column header options',\n detail: 'Standard columns:\\nheaderName: \"Model\", \\nfield: \"model\", \\nsortable: true (optional),\\nsort: \"desc\" (optional) => descending sort (show icon)\\nunSortIcon: true (optional) => unsorted (show icon)\\n\\nSpecial columns:\\nheaderName: \"\",\\nfield: \"button\"\\nheaderName: \"\",\\nfield: \"link\"',\n },\n },\n },\n rowData: {\n description: 'Row data options',\n name: 'rows',\n table: {\n category: 'ifx-table props',\n type: {\n summary: 'Row data options',\n detail: 'Standard row values:\\nmake: \"Toyota\", \\nmodel: \"Celica\", \\nprice: 35000 \\n\\nSpecial row values (incl buttons):\\nmake: \"Porsche\",\\nmodel: \"Boxster\",\\nprice: \"72000\",\\nbutton: { \\ndisabled: false (optional),\\nvariant: \"outline\" (optional)\\nsize: \"s\" (optional),\\ntext: \"Button\"\\n...other ifx-button properties\\n}',\n },\n },\n },\n variant: {\n description: 'Sets the variant of the table.',\n table: {\n category: 'ifx-table props',\n defaultValue: { summary: 'default' },\n },\n options: ['default', 'zebra'],\n control: { type: 'radio' },\n },\n }\n};\n\n\n\nconst DefaultTemplate = (args) => {\n if (args.filterOrientation === 'none') {\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\"\n variant='${args.variant}'>\n</ifx-table>`;\n return table;\n } else {\n //sidebar\n const filterAccordions = args.columnDefs.map(column => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const filterOptions = uniqueColValues.map((option, index) => {\n return `<ifx-list-entry slot=\"slot${index}\" label=\"${option}\" value=\"false\"></ifx-list-entry>`;\n }).join('');\n\n return `\n <ifx-filter-accordion slot=\"filter-accordion\" filter-group-name=\"${column.field}\">\n <ifx-list slot=\"list\" type=\"checkbox\" name=\"${column.field}\" max-visible-items=\"6\">\n ${filterOptions}\n </ifx-list>\n </ifx-filter-accordion>\n `;\n }).join('');\n\n //topbar\n const filterComponents = args.columnDefs.map((column, index) => {\n const uniqueColValues = [...new Set(args.rowData.map(row => row[column.field]))];\n const options = uniqueColValues.map(option => ({\n value: option,\n label: option,\n selected: false\n }));\n\n // Directly use JSON.stringify without replacing quotes\n const optionsString = JSON.stringify(options);\n\n return `\n <ifx-set-filter slot=\"filter-component-${index + 1}\"\n options='${optionsString}' \n filter-label='${column.headerName}'\n filter-name='${column.field}'\n type='multi-select'\n search-enabled='true'>\n </ifx-set-filter>\n `;\n }).join('\\n');\n\n\n\n const filterTypeGroupComponent = args.filterOrientation === 'sidebar'\n ? `<ifx-filter-type-group slot=\"sidebar-filter\">\n <div slot=\"filter-search\">\n <ifx-filter-search filter-orientation=\"sidebar\" filter-name=\"search\"></ifx-filter-search>\n </div>\n ${filterAccordions}\n </ifx-filter-type-group>`\n :\n `<ifx-filter-bar slot=\"topbar-filter\" max-shown-filters=\"3\">\n <ifx-filter-search slot=\"filter-search\" filter-orientation=\"topbar\"></ifx-filter-search>\n ${filterComponents}\n </ifx-filter-bar>`;\n\n const table = `<ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n ${filterTypeGroupComponent}\n</ifx-table>`;\n\n return table;\n }\n};\n\n\n\nexport const Pagination = DefaultTemplate.bind({});\nPagination.args = {\n pagination: true,\n paginationPageSize: 10,\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'none',\n};\n\n\nconst CustomCellTemplate = (args) => {\n const table = `\n <ifx-table\n row-height=\"${args.rowHeight}\"\n cols='${JSON.stringify(args.columnDefs)}'\n rows='${JSON.stringify(args.rowData)}'\n table-height=\"${args.tableHeight}\"\n pagination=\"${args.pagination}\"\n pagination-page-size=\"${args.paginationPageSize}\"\n filter-orientation=\"${args.filterOrientation}\">\n </ifx-table>`;\n return table;\n};\n\n\n\nexport const IncludesButtons = CustomCellTemplate.bind({});\nIncludesButtons.args = {\n rowHeight: 'default',\n columnDefs: columnDefsWithButtonCol,\n rowData: rowDataWithButtonCol,\n filterOrientation: 'none',\n pagination: false,\n paginationPageSize: 10,\n};\n\nexport const SidebarFilter = DefaultTemplate.bind({});\nSidebarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'sidebar',\n};\n\nexport const TopbarFilter = DefaultTemplate.bind({});\nTopbarFilter.args = {\n rowHeight: 'default',\n columnDefs: columnDefs,\n rowData: rowData,\n filterOrientation: 'topbar',\n};\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@infineon/infineon-design-system-stencil",
|
|
3
|
-
"version": "33.1.0--canary.1811.
|
|
3
|
+
"version": "33.1.0--canary.1811.4ac04cfa69fd0fdda43c50ce117eefa120588bc0.0",
|
|
4
4
|
"private": false,
|
|
5
5
|
"description": "Infineon design system Stencil web components",
|
|
6
6
|
"homepage": "https://infineon.github.io/infineon-design-system-stencil",
|