Static Site

2024-06-14 16:51:30 -07:00
parent 3aed250488
commit 6737ddfb59
1706 changed files with 628 additions and 323 deletions
--- a/Static/package/dist/collection/components/table/table.stories.js
+++ b/Static/package/dist/collection/components/table/table.stories.js
@ -0,0 +1,150 @@
+//default
+const columnDefs = [
+  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },
+  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
+  { headerName: 'Price', field: 'price' },
+  { headerName: 'Age', field: 'age' }
+];
+const rowData = [
+  { make: 'Toyota', model: 'Celica', price: 35000, age: 10 },
+  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12 },
+  { make: 'Porsche', model: 'Boxster', price: 72000 }
+];
+//table with button col
+const columnDefsWithButtonCol = [
+  { headerName: 'Make', field: 'make', sortable: true, sort: 'desc', unSortIcon: true },
+  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
+  { headerName: 'Price', field: 'price' },
+  { headerName: 'Age', field: 'age' },
+  { headerName: '', field: 'button' }
+];
+const rowDataWithButtonCol = [
+  {
+    make: 'Toyota', model: 'Celica', price: 35000, age: 10, button: 'something about Toyota'
+  },
+  { make: 'Ford', model: 'Mondeo', price: 32000, age: 12, button: 'something about Ford' },
+  {
+    make: 'Porsche', model: 'Boxster', price: 72000, button: {
+      disabled: false,
+      variant: "secondary",
+      size: "s",
+      target: "_blank",
+      color: "secondary",
+      text: "Button"
+      // ... you can extend this as per the properties of `ifx-button`
+    }
+  }
+];
+//other example
+// const columnDefsDragAndDrop = [
+//   { valueGetter: '"Drag"', dndSource: true },
+//   { field: 'id' },
+//   { field: 'color' },
+//   { field: 'value1' },
+//   { field: 'value2' },
+// ];
+// var rowIdSequence = 100;
+// function getRowDataDragAndDrop() {
+//   var rowDataDragAndDrop = [];
+//   [
+//     'Red',
+//     'Green',
+//     'Blue',
+//     'Red',
+//     'Green',
+//     'Blue',
+//     'Red',
+//     'Green',
+//     'Blue',
+//   ].forEach(function (color) {
+//     var newDataItem = {
+//       id: rowIdSequence++,
+//       color: color,
+//       value1: Math.floor(Math.random() * 100),
+//       value2: Math.floor(Math.random() * 100),
+//     };
+//     rowDataDragAndDrop.push(newDataItem);
+//   });
+//   return rowDataDragAndDrop;
+// }
+export default {
+  title: 'Under Development/Table (advanced)',
+  // tags: ['autodocs'],
+  args: {
+    tableHeight: 'auto',
+    pagination: false,
+    paginationPageSize: 10,
+    rowHeight: 40,
+  },
+  argTypes: {
+    tableHeight: {
+      table: {
+        type: {
+          summary: 'Options',
+          detail: 'Default: "auto"\nExample for fixed height: "400px"',
+        }
+      },
+    },
+    rowHeight: {
+      options: ['compact', 'default'],
+      control: { type: 'radio' },
+    },
+    columnDefs: {
+      table: {
+        type: {
+          summary: 'Column header options',
+          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"',
+        },
+      },
+    },
+    rowData: {
+      table: {
+        type: {
+          summary: 'Row data options',
+          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}',
+        },
+      },
+    }
+  }
+};
+const DefaultTemplate = (args) => `<ifx-table 
+row-height='${args.rowHeight}'
+cols='${JSON.stringify(args.columnDefs)}' 
+rows='${JSON.stringify(args.rowData)}'
+table-height='${args.tableHeight}'
+pagination='${args.pagination}'
+pagination-page-size='${args.paginationPageSize}'>
+</ifx-table>`;
+// export const Default = DefaultTemplate.bind({});
+// Default.args = {
+//   rowHeight: 'default',
+//   columnDefs: columnDefs,
+//   rowData: rowData,
+// };
+// export const FixedHeight = DefaultTemplate.bind({});
+// FixedHeight.args = {
+//   tableHeight: '400px',
+//   rowHeight: 'default',
+//   columnDefs: columnDefs,
+//   rowData: rowData,
+// };
+export const Pagination = DefaultTemplate.bind({});
+Pagination.args = {
+  pagination: true,
+  paginationPageSize: 10,
+  rowHeight: 'default',
+  columnDefs: columnDefs,
+  rowData: rowData,
+};
+export const IncludesButtons = DefaultTemplate.bind({});
+IncludesButtons.args = {
+  rowHeight: 'default',
+  columnDefs: columnDefsWithButtonCol,
+  rowData: rowDataWithButtonCol,
+};
+// export const DragAndDrop = DefaultTemplate.bind({});
+// DragAndDrop.args = {
+//   columnDefs: columnDefsDragAndDrop,
+//   rowData: getRowDataDragAndDrop(),
+// };
+//# sourceMappingURL=table.stories.js.map