@bexis2/bexis2-core-ui 0.3.4 → 0.3.6

package/README.md

@@ -1,5 +1,18 @@
 # bexis-core-ui
 
+## 0.3.6
+
+- FileUpload 
+  - add progressbar during upload
+- Table
+  - fix update issue with first row entry
+
+## 0.3.5
+
+- listeItemType
+  - add description
+
+
 ## 0.3.4
 
 - Page

package/dist/components/File/FileUploader.svelte

@@ -9,10 +9,12 @@ import { Api } from "../../services/Api.js";
 export let id = 0;
 export let version = 1;
 import { onMount } from "svelte";
+import { ProgressBar } from "@skeletonlabs/skeleton";
 export let start = "";
 export let submit = "";
 export let context = "";
 export let data;
+let isUploading = false;
 $:
   model = data;
 $:
@@ -72,6 +74,7 @@ function getErrorMessage(rejected) {
 }
 async function handleSubmit() {
   dispatch("submit");
+  isUploading = true;
   let url = submit + "?id=" + id;
   if (files.accepted.length > 0) {
     const formData = new FormData();
@@ -89,6 +92,7 @@ async function handleSubmit() {
       files.accepted = [];
     }
   }
+  isUploading = false;
 }
 </script>
 
@@ -115,6 +119,9 @@ async function handleSubmit() {
 					{/if}
 				</p>
 			</DropZone>
+			{#if isUploading}
+					<ProgressBar  value={undefined}/>
+			{/if}
 		</div>
 
 		<button id={submitBt} color="primary" style="display:none"><Fa icon={faSave} /></button>

package/dist/components/Table/Table.svelte

@@ -1,382 +1,8 @@
-<script>import { createEventDispatcher } from "svelte";
-import { createTable, Subscribe, Render, createRender } from "svelte-headless-table";
-import {
-  addSortBy,
-  addPagination,
-  addExpandedRows,
-  addColumnFilters,
-  addTableFilter,
-  addDataExport
-} from "svelte-headless-table/plugins";
-import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
-import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
-storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
-import TableFilter from "./TableFilter.svelte";
-import TablePagination from "./TablePagination.svelte";
-import { columnFilter, searchFilter } from "./filter";
+<script>import Table from "./TableContent.svelte";
 export let config;
-let {
-  id: tableId,
-  // Unique table ID
-  data,
-  // Data store
-  columns,
-  // Column configuration
-  resizable = "none",
-  // Resizability config
-  height = null,
-  // Table height
-  rowHeight = null,
-  // Row height
-  optionsComponent,
-  // Custom component to render in the last column
-  defaultPageSize = 10,
-  // Default page size - number of rows to display per page
-  toggle = false,
-  // Whether to display the fitToScreen toggle
-  pageSizes = [5, 10, 15, 20],
-  // Page sizes to display in the pagination component
-  fitToScreen = true,
-  // Whether to fit the table to the screen,
-  exportable = false
-  // Whether to display the export button and enable export functionality
-} = config;
-const dispatch = createEventDispatcher();
-const actionDispatcher = (obj) => dispatch("action", obj);
-const table = createTable(data, {
-  colFilter: addColumnFilters(),
-  tableFilter: addTableFilter({
-    fn: searchFilter
-  }),
-  sort: addSortBy({ disableMultiSort: true }),
-  page: addPagination({ initialPageSize: defaultPageSize }),
-  expand: addExpandedRows(),
-  export: addDataExport({ format: "csv" })
-});
-const allCols = {};
-$data.forEach((item) => {
-  Object.keys(item).forEach((key) => {
-    if (!allCols[key]) {
-      allCols[key] = {};
-    }
-  });
-});
-const accessors = Object.keys(allCols);
-const tableColumns = [
-  ...accessors.filter((accessor) => {
-    const key = accessor;
-    if (columns !== void 0 && key in columns && columns[key].exclude === true) {
-      return false;
-    }
-    return true;
-  }).map((accessor) => {
-    const key = accessor;
-    if (columns !== void 0 && key in columns) {
-      const {
-        header,
-        // Custom header to display
-        colFilterFn,
-        // Custom column filter function
-        colFilterComponent,
-        // Custom column filter component
-        instructions,
-        // Custom instructions for the column cells (sorting, filtering, searching, rendering)
-        disableFiltering = false,
-        // Whether to disable filtering for the column
-        disableSorting = false
-        // Whether to disable sorting for the column
-      } = columns[key];
-      const { toSortableValueFn, toFilterableValueFn, toStringFn, renderComponent } = instructions ?? {};
-      return table.column({
-        // If header is not provided, use the key as the header
-        header: header ?? key,
-        accessor,
-        // Render the cell with the provided component, or use the toStringFn if provided, or just use the value
-        cell: ({ value, row }) => {
-          return renderComponent ? createRender(renderComponent, { value, row }) : toStringFn ? toStringFn(value) : value;
-        },
-        plugins: {
-          // Sorting config
-          sort: {
-            disable: disableSorting,
-            invert: true,
-            getSortValue: (row) => {
-              return toSortableValueFn ? toSortableValueFn(row) : row;
-            }
-          },
-          colFilter: !disableFiltering ? {
-            fn: ({ filterValue: filterValue2, value }) => {
-              const val = toFilterableValueFn ? toFilterableValueFn(value) : value;
-              return colFilterFn ? colFilterFn({ filterValue: filterValue2, value: val }) : columnFilter({ filterValue: filterValue2, value: val });
-            },
-            render: ({ filterValue: filterValue2, values, id }) => {
-              return createRender(colFilterComponent ?? TableFilter, {
-                filterValue: filterValue2,
-                id,
-                tableId,
-                values,
-                toFilterableValueFn
-              });
-            }
-          } : void 0,
-          tableFilter: {
-            // Search filter config
-            getFilterValue: (row) => {
-              return toStringFn ? toStringFn(row) : row;
-            }
-          }
-        }
-      });
-    } else {
-      return table.column({
-        header: key,
-        accessor,
-        cell: ({ value }) => {
-          return value ? value : "";
-        },
-        plugins: {
-          // Sorting enabled by default
-          sort: {
-            invert: true
-          },
-          // Filtering enabled by default
-          colFilter: {
-            fn: columnFilter,
-            render: ({ filterValue: filterValue2, values, id }) => createRender(TableFilter, {
-              filterValue: filterValue2,
-              id,
-              tableId,
-              values
-            })
-          }
-        }
-      });
-    }
-  })
-];
-if (optionsComponent !== void 0) {
-  tableColumns.push(
-    table.display({
-      id: "optionsColumn",
-      header: "",
-      plugins: {
-        export: {
-          exclude: true
-        }
-      },
-      cell: ({ row }, _) => {
-        return createRender(optionsComponent, {
-          row: row.isData() ? row.original : null,
-          dispatchFn: actionDispatcher
-        });
-      }
-    })
-  );
-}
-const createdTableColumns = table.createColumns(tableColumns);
-const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table.createViewModel(createdTableColumns);
-const { filterValue } = pluginStates.tableFilter;
-const { exportedData } = pluginStates.export;
-const minWidth = (id) => {
-  if (columns && id in columns) {
-    return columns[id].minWidth ?? 0;
-  }
-  return 0;
-};
-const fixedWidth = (id) => {
-  if (columns && id in columns) {
-    return columns[id].fixedWidth ?? 0;
-  }
-  return 0;
-};
-const cellStyle = (id) => {
-  const minW = minWidth(id);
-  const fixedW = fixedWidth(id);
-  const styles = [];
-  minW && styles.push(`min-width: ${minW}px`);
-  fixedW && styles.push(`width: ${fixedW}px`);
-  return styles.join(";");
-};
-const resetResize = () => {
-  if (resizable === "columns" || resizable === "both") {
-    $headerRows.forEach((row) => {
-      row.cells.forEach((cell) => {
-        const minW = minWidth(cell.id);
-        const fixedW = fixedWidth(cell.id);
-        fixedW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("width", `${fixedW}px`);
-        minW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("min-width", `${minW}px`);
-        !minW && !fixedW && document.getElementById(`th-${tableId}-${cell.id}`)?.style.setProperty("width", "auto");
-      });
-    });
-  }
-  if (resizable === "rows" || resizable === "both") {
-    $pageRows.forEach((row) => {
-      row.cells.forEach((cell) => {
-        document.getElementById(`${tableId}-${cell.id}-${row.id}`)?.style.setProperty("height", "auto");
-      });
-    });
-  }
-};
-const exportAsCsv = () => {
-  const anchor = document.createElement("a");
-  anchor.style.display = "none";
-  anchor.href = `data:text/csv;charset=utf-8,${encodeURIComponent($exportedData)}`;
-  anchor.download = `${tableId}.csv`;
-  document.body.appendChild(anchor);
-  anchor.click();
-  document.body.removeChild(anchor);
-};
+const data = config.data;
 </script>
 
-<div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
-	<div class="table-container">
-		<!-- Enable the search filter if table is not empty -->
-		{#if $data.length > 0}
-			<input
-				class="input p-2 border border-primary-500"
-				type="text"
-				bind:value={$filterValue}
-				placeholder="Search rows..."
-				id="{tableId}-search"
-			/>
-			<div class="flex justify-between items-center py-2 w-full">
-				<div>
-					<!-- Enable the fitToScreen toggle if toggle === true -->
-					{#if toggle}
-						<SlideToggle
-							name="slider-label"
-							active="bg-primary-500"
-							size="sm"
-							checked={fitToScreen}
-							id="{tableId}-toggle"
-							on:change={() => (fitToScreen = !fitToScreen)}>Fit to screen</SlideToggle
-						>
-					{/if}
-				</div>
-				<div class="flex gap-2">
-					<!-- Enable the resetResize button if resizable !== 'none' -->
-					{#if resizable !== 'none'}
-						<button
-							type="button"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							on:click|preventDefault={resetResize}>Reset sizing</button
-						>
-					{/if}
-					{#if exportable}
-						<button
-							type="button"
-							class="btn btn-sm variant-filled-primary rounded-full order-last"
-							on:click|preventDefault={exportAsCsv}>Export as CSV</button
-						>
-					{/if}
-				</div>
-			</div>
-		{/if}
-
-		<div class="overflow-auto" style="height: {height}px">
-			<table
-				{...$tableAttrs}
-				class="table table-auto table-compact bg-tertiary-500/30 dark:bg-tertiary-900/10 overflow-clip"
-				id="{tableId}-table"
-			>
-				<!-- If table height is provided, making the top row sticky -->
-				<thead class=" {height != null ? `sticky top-0` : ''}">
-					{#if $data.length > 0}
-						{#each $headerRows as headerRow (headerRow.id)}
-							<Subscribe
-								rowAttrs={headerRow.attrs()}
-								let:rowAttrs
-								rowProps={headerRow.props()}
-								let:rowProps
-							>
-								<tr {...rowAttrs} class="bg-primary-300 dark:bg-primary-500 items-stretch">
-									{#each headerRow.cells as cell (cell.id)}
-										<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-											<th
-												scope="col"
-												class="!p-2 overflow-auto"
-												class:resize-x={(resizable === 'columns' || resizable === 'both') &&
-													!fixedWidth(cell.id)}
-												{...attrs}
-												id="th-{tableId}-{cell.id}"
-												style={cellStyle(cell.id)}
-											>
-												<div class="flex justify-between items-center">
-													<div class="flex gap-1 whitespace-pre-wrap">
-														<!-- Adding sorting config and styling -->
-														<span
-															class:underline={props.sort.order}
-															class:normal-case={cell.id !== cell.label}
-															class:cursor-pointer={!props.sort.disabled}
-															on:click={props.sort.toggle}
-															on:keydown={props.sort.toggle}
-														>
-															{cell.render()}
-														</span>
-														<div class="w-2">
-															{#if props.sort.order === 'asc'}
-																▾
-															{:else if props.sort.order === 'desc'}
-																▴
-															{/if}
-														</div>
-													</div>
-													<!-- Adding column filter config -->
-													{#if cell.isData()}
-														{#if props.colFilter?.render}
-															<div class="">
-																<Render of={props.colFilter.render} />
-															</div>
-														{/if}
-													{/if}
-												</div>
-											</th>
-										</Subscribe>
-									{/each}
-								</tr>
-							</Subscribe>
-						{/each}
-					{:else}
-						<!-- Table is empty -->
-						<p class="items-center justify-center flex w-full p-10 italic">Nothing to show here.</p>
-					{/if}
-				</thead>
-
-				<tbody class="overflow-auto" {...$tableBodyAttrs}>
-					{#if $data.length > 0}
-						{#each $pageRows as row (row.id)}
-							<Subscribe rowAttrs={row.attrs()} let:rowAttrs>
-								<tr {...rowAttrs} id="{tableId}-row-{row.id}" class="">
-									{#each row.cells as cell, index (cell?.id)}
-										<Subscribe attrs={cell.attrs()} let:attrs>
-											<td
-												{...attrs}
-												class="!p-2 overflow-auto {index === 0 &&
-												(resizable === 'rows' || resizable === 'both')
-													? 'resize-y'
-													: ''}"
-												id="{tableId}-{cell.id}-{row.id}"
-											>
-												<!-- Adding config for initial rowHeight, if provided -->
-												<div
-													class="flex items-center"
-													style="height: {rowHeight ? `${rowHeight}px` : 'auto'};"
-												>
-													<div class="grow h-full"><Render of={cell.render()} /></div>
-												</div>
-											</td>
-										</Subscribe>
-									{/each}
-								</tr>
-							</Subscribe>
-						{/each}
-					{/if}
-				</tbody>
-			</table>
-		</div>
-	</div>
-	{#if $data.length > 0}
-		<!-- Adding pagination, if table is not empty -->
-		<TablePagination pageConfig={pluginStates.page} {pageSizes} id={tableId} />
-	{/if}
-</div>
+{#key $data.length && true}
+	<Table {config} on:action />
+{/key}

package/dist/components/Table/Table.svelte.d.ts

@@ -1,16 +1,5 @@
 import { SvelteComponentTyped } from "svelte";
-import type { TableConfig } from '../../models/Models';
-declare const __propDef: {
-    props: {
-        config: TableConfig<any>;
-    };
-    events: {
-        action: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
+declare const __propDef: any;
 export type TableProps = typeof __propDef.props;
 export type TableEvents = typeof __propDef.events;
 export type TableSlots = typeof __propDef.slots;