@bexis2/bexis2-core-ui 0.4.9 → 0.4.10

package/README.md

@@ -1,7 +1,16 @@
-# bexis2-core-ui
-## 0.4.9
-- update npm packages
+# bexis-core-ui
+## 0.4.10
+- Table:
+  - Fixes issue with sticky Tables not rendering the filters correctly.
+  - Fixes issues related to date picker in Tables with date filters.
+  - Updates default Table page sizes to [5, 10, 20, 50, 100].
+  - Updates the structure of server-side configuration for Tables.
+  - Adds new page size dropdown in Table for to fix contrast issues in the component.
+  - Adds showing/hiding Table columns.
   
+- Facets:
+  - Adds Facets component.
+
 ## 0.4.8
 - page
   - add notification if api call to backend faild

package/dist/components/Facets/Facets.svelte

@@ -0,0 +1,108 @@
+<script>import { getModalStore, Modal, TreeView, TreeViewItem } from "@skeletonlabs/skeleton";
+import ShowMore from "./ShowMore.svelte";
+export let groupSelection = false;
+export let groups;
+export let selected;
+export let selectedGroups = {};
+export let showAll = false;
+export let open = false;
+const modalStore = getModalStore();
+const showMore = (group) => {
+  modalStore.trigger({
+    type: "component",
+    title: `${group}`,
+    component: {
+      ref: ShowMore,
+      props: {
+        group,
+        handleSave,
+        handleCancel,
+        selected: selected[group],
+        items: groups[group].sort((a, b) => a.value.localeCompare(b.value))
+      }
+    }
+  });
+};
+const handleSave = (group, selectedItems) => {
+  selected[group] = selectedItems;
+  modalStore.close();
+};
+const handleCancel = () => {
+  modalStore.close();
+};
+const sortOptions = () => {
+  Object.keys(groups).forEach((group) => {
+    groups[group] = [
+      ...selected[group].sort((a, b) => {
+        if (a.count != void 0 && b.count != void 0) {
+          return b.count - a.count;
+        }
+        return a.value.localeCompare(b.value);
+      }),
+      ...groups[group].filter((item) => !selected[group].includes(item)).sort((a, b) => {
+        if (a.count != void 0 && b.count != void 0) {
+          return b.count - a.count;
+        }
+        return a.value.localeCompare(b.value);
+      })
+    ];
+  });
+};
+$: selected, sortOptions();
+</script>
+
+<TreeView selection={groupSelection} multiple={groupSelection} padding="p-1" hover="">
+	{#each Object.keys(groups) as group}
+		<TreeViewItem
+			name="groups"
+			value={group}
+			{open}
+			hyphenOpacity="opacity-0"
+			bind:group={selectedGroups}
+			bind:checked={selectedGroups[group]}
+		>
+			<p class="font-semibold">{group}</p>
+
+			<svelte:fragment slot="children">
+				<!-- If more than 5 choices, show the remaining in the Modal -->
+				{#if !showAll}
+					{#each groups[group].slice(0, 5) as item}
+						<TreeViewItem
+							bind:group={selected[group]}
+							name={group}
+							value={item}
+							hyphenOpacity="opacity-0"
+							spacing="space-x-3"
+							selection
+							multiple
+						>
+							<p>{item.value} ({item.count})</p>
+						</TreeViewItem>
+					{/each}
+					<!-- Trigger for the Modal to view all options -->
+					{#if groups[group].length > 5}
+						<TreeViewItem hyphenOpacity="opacity-0">
+							<button class="anchor" on:click={() => showMore(group)}>more</button></TreeViewItem
+						>
+					{/if}
+				{:else}
+					{#each groups[group] as item}
+						<TreeViewItem
+							bind:group={selected[group]}
+							name={group}
+							value={item}
+							hyphenOpacity="opacity-0"
+							spacing="space-x-3"
+							selection
+							multiple
+						>
+							<p>{item.value} ({item.count})</p>
+						</TreeViewItem>
+					{/each}
+				{/if}
+			</svelte:fragment>
+		</TreeViewItem>
+	{/each}
+</TreeView>
+
+<Modal />

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

@@ -0,0 +1,24 @@
+import { SvelteComponent } from "svelte";
+import type { FacetGroup } from '../../models/Models';
+declare const __propDef: {
+    props: {
+        groupSelection?: boolean;
+        groups: FacetGroup;
+        selected: FacetGroup;
+        selectedGroups?: {
+            [key: string]: boolean;
+        };
+        showAll?: boolean;
+        open?: boolean;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FacetsProps = typeof __propDef.props;
+export type FacetsEvents = typeof __propDef.events;
+export type FacetsSlots = typeof __propDef.slots;
+export default class Facets extends SvelteComponent<FacetsProps, FacetsEvents, FacetsSlots> {
+}
+export {};

package/dist/components/Facets/ShowMore.svelte

@@ -0,0 +1,75 @@
+<script>export let group;
+export let items;
+export let selected;
+export let handleSave;
+export let handleCancel;
+let selectedItems = selected;
+const handleCheck = (e, index) => {
+  const target = e.target;
+  if (target.checked) {
+    selectedItems = [...selectedItems, items[index]];
+  } else {
+    selectedItems = selectedItems.filter((item) => item !== items[index]);
+  }
+};
+const selectAll = () => {
+  selectedItems = items;
+};
+const selectNone = () => {
+  selectedItems = [];
+};
+const onSave = () => {
+  handleSave(group, selectedItems);
+};
+const onCancel = () => {
+  selectedItems = selected;
+  handleCancel();
+};
+const gridClass = (items2) => {
+  if (items2.length >= 50) {
+    return "grid-cols-5";
+  } else if (items2.length >= 30) {
+    return "grid-cols-4";
+  } else if (items2.length >= 20) {
+    return "grid-cols-3";
+  }
+  return "grid-cols-2";
+};
+</script>
+
+<div class="p-5 rounded-md bg-surface-50 dark:bg-surface-800 border-primary-500 border-2">
+	<!-- Header -->
+	<h2 class="text-xl font-semibold">{group}</h2>
+
+	<!-- Items -->
+	<div
+		class="grid {gridClass(
+			items
+		)} !gap-x-20 gap-y-2 py-10 px-2 max-h-[1000px] overflow-x-auto max-w-6xl"
+	>
+		{#each items as item, index}
+			<label class="flex gap-3 items-center">
+				<input
+					type="checkbox"
+					class="checkbox"
+					value={item.value}
+					on:click={(e) => handleCheck(e, index)}
+					checked={selectedItems.includes(item)}
+				/>
+				<span class="whitespace-nowrap break-before-avoid break-after-avoid">{item.value}</span>
+			</label>
+		{/each}
+	</div>
+
+	<!-- Footer -->
+	<div class="flex w-full justify-between gap-5">
+		<div class="flex gap-3">
+			<button class="btn btn-sm variant-filled-tertiary" on:click={selectNone}>None</button>
+			<button class="btn btn-sm variant-filled-tertiary" on:click={selectAll}>All</button>
+		</div>
+		<div class="flex gap-3">
+			<button class="btn btn-sm variant-filled-primary" on:click={onSave}>Save</button>
+			<button class="btn btn-sm variant-filled-secondary" on:click={onCancel}>Cancel</button>
+		</div>
+	</div>
+</div>

package/dist/components/Facets/ShowMore.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import type { FacetOption } from '../../models/Models';
+declare const __propDef: {
+    props: {
+        group: string;
+        items: FacetOption[];
+        selected: FacetOption[];
+        handleSave: (group: string, selectedItems: FacetOption[]) => {};
+        handleCancel: () => {};
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ShowMoreProps = typeof __propDef.props;
+export type ShowMoreEvents = typeof __propDef.events;
+export type ShowMoreSlots = typeof __propDef.slots;
+export default class ShowMore extends SvelteComponent<ShowMoreProps, ShowMoreEvents, ShowMoreSlots> {
+}
+export {};

package/dist/components/Table/ColumnsMenu.svelte

@@ -0,0 +1,33 @@
+<script>import { popup } from "@skeletonlabs/skeleton";
+export let columns = [];
+export let tableId;
+const popupCombobox = {
+  event: "click",
+  target: `${tableId}-columns-menu`,
+  placement: "bottom"
+};
+</script>
+
+<button
+	type="button"
+	class="btn btn-sm variant-filled-primary rounded-full order-last"
+	use:popup={popupCombobox}>Columns</button
+>
+
+<div
+	class="bg-white dark:bg-surface-500 p-4 rounded-md shadow-md z-10"
+	data-popup="{tableId}-columns-menu"
+>
+	{#each columns as column}
+		<div class="flex gap-3 items-center">
+			<input
+				type="checkbox"
+				bind:checked={column.visible}
+				disabled={columns.filter((c) => c.visible).length === 1 && column.visible}
+			/>
+			<span>{column.label}</span>
+		</div>
+	{/each}
+
+	<div class="arrow bg-white dark:bg-surface-500" />
+</div>

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

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        columns?: {
+            id: string;
+            label: string;
+            visible: boolean;
+        }[];
+        tableId: string;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ColumnsMenuProps = typeof __propDef.props;
+export type ColumnsMenuEvents = typeof __propDef.events;
+export type ColumnsMenuSlots = typeof __propDef.slots;
+export default class ColumnsMenu extends SvelteComponent<ColumnsMenuProps, ColumnsMenuEvents, ColumnsMenuSlots> {
+}
+export {};

package/dist/components/Table/TableContent.svelte

@@ -9,7 +9,8 @@ import {
   addExpandedRows,
   addColumnFilters,
   addTableFilter,
-  addDataExport
+  addDataExport,
+  addHiddenColumns
 } from "svelte-headless-table/plugins";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { SlideToggle, storePopup } from "@skeletonlabs/skeleton";
@@ -19,6 +20,7 @@ import TableFilter from "./TableFilter.svelte";
 import TableFilterServer from "./TableFilterServer.svelte";
 import TablePagination from "./TablePagination.svelte";
 import TablePaginationServer from "./TablePaginationServer.svelte";
+import ColumnsMenu from "./ColumnsMenu.svelte";
 import { columnFilter, searchFilter } from "./filter";
 import {
   cellStyle,
@@ -51,27 +53,18 @@ let {
   // Whether to display the fitToScreen toggle
   search = true,
   // Whether to display the search input
-  pageSizes = [5, 10, 15, 20],
+  pageSizes = [5, 10, 20, 50, 100],
   // 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
-  serverSide = false,
-  // Whether the table is client or server-side
-  URL = "",
-  // URL to fetch data from
-  token = "",
-  // Bearer token to authenticate the request
-  sendModel = new Send(),
-  // Model to send requests
-  entityId = 0,
-  // Entity ID to send with the request
-  versionId = 0
-  // Version ID to send with the request,
+  server
 } = config;
 let searchValue = "";
 let isFetching = false;
+const serverSide = server !== void 0;
+const { baseUrl, sendModel, entityId, versionId } = server ?? {};
 const filters = writable({});
 const dispatch = createEventDispatcher();
 const actionDispatcher = (obj) => dispatch("action", obj);
@@ -85,6 +78,7 @@ const table = createTable(data, {
     fn: searchFilter,
     serverSide
   }),
+  hideColumns: addHiddenColumns(),
   sort: addSortBy({
     disableMultiSort: true,
     serverSide
@@ -109,14 +103,24 @@ Object.keys(allCols).forEach((key) => {
   $filters = { ...$filters, [key]: {} };
 });
 const accessors = Object.keys(allCols);
+const unexcludedColumns = accessors.filter((accessor) => {
+  const key = accessor;
+  if (columns !== void 0 && key in columns && columns[key].exclude === true) {
+    return false;
+  }
+  return true;
+});
+let shownColumns = unexcludedColumns.map((c) => {
+  const key = c;
+  const label = key.charAt(0).toUpperCase() + key.slice(1);
+  return {
+    id: c,
+    label: columns && columns[key] && columns[key].header ? columns[key].header : label,
+    visible: true
+  };
+});
 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) => {
+  ...unexcludedColumns.map((accessor) => {
     const key = accessor;
     if (columns !== void 0 && key in columns) {
       const {
@@ -246,19 +250,20 @@ const { headerRows, pageRows, tableAttrs, tableBodyAttrs, pluginStates } = table
 const { filterValue } = pluginStates.tableFilter;
 const { exportedData } = pluginStates.export;
 const { pageIndex, pageSize } = pluginStates.page;
+const { hiddenColumnIds } = pluginStates.hideColumns;
 const updateTable = async () => {
+  if (!sendModel) throw new Error("Server-side configuration is missing");
   sendModel.limit = $pageSize;
   sendModel.offset = $pageSize * $pageIndex;
-  sendModel.version = versionId;
-  sendModel.id = entityId;
+  sendModel.version = versionId || -1;
+  sendModel.id = entityId || -1;
   sendModel.filter = normalizeFilters($filters);
   let fetchData;
   try {
     isFetching = true;
-    fetchData = await fetch(URL, {
+    fetchData = await fetch(baseUrl || "", {
       headers: {
-        "Content-Type": "application/json",
-        Authorization: `Bearer ${token}`
+        "Content-Type": "application/json"
       },
       method: "POST",
       body: JSON.stringify(sendModel)
@@ -293,6 +298,7 @@ const updateTable = async () => {
   return response;
 };
 const sortServer = (order, id) => {
+  if (!sendModel) throw new Error("Server-side configuration is missing");
   if (order === void 0) {
     sendModel.order = [];
   } else {
@@ -304,16 +310,19 @@ const sortServer = (order, id) => {
 $: sortKeys = pluginStates.sort.sortKeys;
 $: serverSide && updateTable();
 $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
+$: $hiddenColumnIds = shownColumns.filter((col) => !col.visible).map((col) => col.id);
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>
 	{#if $data.length > 0 || (columns && Object.keys(columns).length > 0)}
 		<div class="table-container">
 			<!-- Enable the search filter if table is not empty -->
-			{#if !serverSide && search}
+			{#if search}
 				<form
 					class="flex gap-2"
 					on:submit|preventDefault={() => {
+						if (!sendModel) throw new Error('Server-side configuration is missing');
+
 						sendModel.q = searchValue;
 						$filterValue = searchValue;
 					}}
@@ -330,6 +339,8 @@ $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 							id="{tableId}-searchReset"
 							class="absolute right-3 items-center"
 							on:click|preventDefault={() => {
+								if (!sendModel) throw new Error('Server-side configuration is missing');
+
 								searchValue = '';
 								sendModel.q = '';
 								$filterValue = '';
@@ -341,6 +352,8 @@ $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 						id="{tableId}-searchSubmit"
 						class="btn variant-filled-primary"
 						on:click|preventDefault={() => {
+							if (!sendModel) throw new Error('Server-side configuration is missing');
+
 							$filterValue = searchValue;
 							sendModel.q = searchValue;
 						}}>Search</button
@@ -381,6 +394,9 @@ $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 							>Export as CSV</button
 						>
 					{/if}
+					{#if shownColumns.length > 0}
+						<ColumnsMenu bind:columns={shownColumns} {tableId} />
+					{/if}
 				</div>
 			</div>
 
@@ -433,9 +449,7 @@ $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 														<!-- Adding column filter config -->
 														{#if cell.isData()}
 															{#if props.colFilter?.render}
-																<div class="">
-																	<Render of={props.colFilter.render} />
-																</div>
+																<Render of={props.colFilter.render} />
 															{/if}
 														{/if}
 													</div>
@@ -506,3 +520,5 @@ $: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 		{/if}
 	{/if}
 </div>
+
+<div id="{tableId}-popups" />

package/dist/components/Table/TableFilter.svelte

@@ -1,4 +1,5 @@
-<script>import Fa from "svelte-fa";
+<script>import Fa from "svelte-fa/src/fa.svelte";
+import { onMount } from "svelte";
 import { faFilter, faPlus, faXmark } from "@fortawesome/free-solid-svg-icons";
 import { popup } from "@skeletonlabs/skeleton";
 import { FilterOptionsEnum } from "../../models/Enums";
@@ -146,7 +147,8 @@ const optionChangeHandler = (e, index) => {
 const valueChangeHandler = (e, index) => {
   dropdowns[index] = {
     ...dropdowns[index],
-    value: type === "date" ? new Date(e.target.value) : e.target.value
+    value: type === "date" ? new Date(e.target.value) : e.target.value,
+    formValue: e.target.value
   };
   $filters = {
     ...$filters,
@@ -166,7 +168,8 @@ const addFilter = (option, value) => {
     ...dropdowns,
     {
       option,
-      value: void 0
+      value: void 0,
+      formValue: void 0
     }
   ];
 };
@@ -184,9 +187,14 @@ $: remainingFilters = options[type].filter(
   (option) => !Object.keys($filters[id]).includes(option.value)
 );
 $: addFilter(options[type][0].value, void 0);
+onMount(() => {
+  const element = document.getElementById(popupId);
+  element?.parentElement?.removeChild(element);
+  element && document.getElementById(`${tableId}-popups`)?.appendChild(element);
+});
 </script>
 
-<form class="">
+<div id="parent-{popupId}">
 	<button
 		class:variant-filled-primary={active}
 		class="btn w-max p-2"
@@ -197,7 +205,7 @@ $: addFilter(options[type][0].value, void 0);
 		<Fa icon={faFilter} size="12" />
 	</button>
 
-	<div data-popup={`${popupId}`} id={popupId} class="z-50">
+	<div data-popup={popupId} id={popupId} class="">
 		<div class="card p-3 grid gap-2 shadow-lg w-max bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
@@ -255,7 +263,7 @@ $: addFilter(options[type][0].value, void 0);
 								type="date"
 								class="input p-1 border border-primary-500"
 								on:input={(e) => valueChangeHandler(e, index)}
-								bind:value={dropdown.value}
+								bind:value={dropdown.formValue}
 							/>
 						{/if}
 					</div>
@@ -289,4 +297,4 @@ $: addFilter(options[type][0].value, void 0);
 			>
 		</div>
 	</div>
-</form>
+</div>

package/dist/components/Table/TableFilterServer.svelte

@@ -134,7 +134,8 @@ const optionChangeHandler = (e, index) => {
 const valueChangeHandler = (e, index) => {
   dropdowns[index] = {
     ...dropdowns[index],
-    value: type === "date" ? new Date(e.target.value) : e.target.value
+    value: type === "date" ? new Date(e.target.value) : e.target.value,
+    formValue: e.target.value
   };
   $filters = {
     ...$filters,
@@ -150,7 +151,8 @@ const addFilter = (option, value) => {
     ...dropdowns,
     {
       option,
-      value: void 0
+      value: void 0,
+      formValue: void 0
     }
   ];
 };

package/dist/components/Table/TablePagination.svelte

@@ -3,8 +3,10 @@ import {
   faAnglesRight,
   faAngleRight,
   faAnglesLeft,
-  faAngleLeft
+  faAngleLeft,
+  faChevronDown
 } from "@fortawesome/free-solid-svg-icons";
+import { ListBox, ListBoxItem, popup } from "@skeletonlabs/skeleton";
 export let pageConfig;
 export let pageSizes;
 export let id;
@@ -23,24 +25,48 @@ const handleChange = (e) => {
     $pageIndex = value - 1;
   }
 };
+let pageSizeDropdownValue = $pageSize;
+const pageSizePopup = {
+  event: "click",
+  target: `#${id}-pageSizeDropdown`,
+  placement: "bottom",
+  closeQuery: ".listbox-item"
+};
 $: goToFirstPageDisabled = !$pageIndex;
 $: goToLastPageDisabled = $pageIndex == $pageCount - 1;
 $: goToNextPageDisabled = !$hasNextPage;
 $: goToPreviousPageDisabled = !$hasPreviousPage;
+$: $pageSize = pageSizeDropdownValue;
 </script>
 
-<div class="flex justify-between w-full items-stretch gap-10">
+<div class="flex justify-between w-full items-stretch gap-10 z-50">
 	<div class="flex justify-start">
-		<select
+		<!-- <select
 			name="pageSize"
 			id="{id}-pageSize"
 			class="select variant-filled-primary w-min font-bold"
 			bind:value={$pageSize}
 		>
 			{#each pageSizes as size}
-				<option value={size}>{size}</option>
+				<option value={size} class="">{size}</option>
 			{/each}
-		</select>
+		</select> -->
+
+		<button class="btn variant-filled-primary w-20 justify-between" use:popup={pageSizePopup}>
+			<span class="capitalize font-semibold">{pageSizeDropdownValue}</span>
+			<Fa icon={faChevronDown} size="xs" />
+		</button>
+
+		<div class="card w-20 shadow-xl py-2" data-popup={`#${id}-pageSizeDropdown`}>
+			<ListBox rounded="rounded-none">
+				{#each pageSizes as size}
+					<ListBoxItem bind:group={pageSizeDropdownValue} name="medium" value={size}
+						>{size}</ListBoxItem
+					>
+				{/each}
+			</ListBox>
+			<div class="arrow bg-surface-100-800-token" />
+		</div>
 	</div>
 	<div class="flex justify-center gap-1">
 		<button

package/dist/components/Table/TablePaginationServer.svelte

@@ -63,7 +63,7 @@ updateTable();
 			bind:value={$pageSize}
 		>
 			{#each pageSizes as size}
-				<option value={size}>{size}</option>
+				<option value={size} class="!bg-primary-700">{size}</option>
 			{/each}
 		</select>
 	</div>