@bexis2/bexis2-core-ui 0.4.8 → 0.4.10

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
     }
   ];
 };
@@ -173,16 +175,12 @@ const applyFilters = () => {
     active = true;
   });
 };
-$:
-  type = isDate ? "date" : type;
-$:
-  remainingFilters = options[type].filter(
-    (option) => !Object.keys($filters[id]).includes(option.value)
-  );
-$:
-  addFilter(options[type][0].value, void 0);
-$:
-  console.log($filters);
+$: type = isDate ? "date" : type;
+$: remainingFilters = options[type].filter(
+  (option) => !Object.keys($filters[id]).includes(option.value)
+);
+$: addFilter(options[type][0].value, void 0);
+$: console.log($filters);
 </script>
 
 <form class="">

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,28 +25,48 @@ const handleChange = (e) => {
     $pageIndex = value - 1;
   }
 };
-$:
-  goToFirstPageDisabled = !$pageIndex;
-$:
-  goToLastPageDisabled = $pageIndex == $pageCount - 1;
-$:
-  goToNextPageDisabled = !$hasNextPage;
-$:
-  goToPreviousPageDisabled = !$hasPreviousPage;
+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

@@ -45,18 +45,12 @@ const goTo = (dst) => {
   }
   updateTable();
 };
-$:
-  pageCount = Math.ceil($serverItemCount / $pageSize);
-$:
-  goToFirstPageDisabled = !$pageIndex;
-$:
-  goToLastPageDisabled = $pageIndex == pageCount - 1;
-$:
-  goToNextPageDisabled = $pageIndex == pageCount - 1;
-$:
-  goToPreviousPageDisabled = !$pageIndex;
-$:
-  $pageSize && updateTable();
+$: pageCount = Math.ceil($serverItemCount / $pageSize);
+$: goToFirstPageDisabled = !$pageIndex;
+$: goToLastPageDisabled = $pageIndex == pageCount - 1;
+$: goToNextPageDisabled = $pageIndex == pageCount - 1;
+$: goToPreviousPageDisabled = !$pageIndex;
+$: $pageSize && updateTable();
 updateTable();
 </script>
 
@@ -69,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>

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

@@ -4,27 +4,10 @@ export declare const minWidth: (id: string, columns: Columns | undefined) => num
 export declare const fixedWidth: (id: string, columns: Columns | undefined) => number;
 export declare const cellStyle: (id: string, columns: Columns | undefined) => string;
 export declare const normalizeFilters: (filters: {
-    [key: string]: {
-        e?: string | number | Date | undefined;
-        ne?: string | number | Date | undefined;
-        gt?: string | number | Date | undefined;
-        lt?: string | number | Date | undefined;
-        gte?: string | number | Date | undefined;
-        lte?: string | number | Date | undefined;
-        c?: string | number | Date | undefined;
-        nc?: string | number | Date | undefined;
-        sw?: string | number | Date | undefined;
-        ew?: string | number | Date | undefined;
-        o?: string | number | Date | undefined;
-        sf?: string | number | Date | undefined;
-        a?: string | number | Date | undefined;
-        u?: string | number | Date | undefined;
-        b?: string | number | Date | undefined;
-        no?: string | number | Date | undefined;
-    };
+    [key: string]: { [key in FilterOptionsEnum]?: number | string | Date; };
 }) => Filter[];
 export declare const exportAsCsv: (tableId: string, exportedData: string) => void;
-export declare const resetResize: (headerRows: any, pageRows: any, tableId: string, columns: Columns | undefined, resizable: 'none' | 'rows' | 'columns' | 'both') => void;
+export declare const resetResize: (headerRows: any, pageRows: any, tableId: string, columns: Columns | undefined, resizable: "none" | "rows" | "columns" | "both") => void;
 export declare const missingValuesFn: (key: number | string, missingValues: {
     [key: string | number]: string;
 }) => string | number;

package/dist/components/form/Checkbox.svelte.d.ts

@@ -1,9 +1,9 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        label?: string | undefined;
-        checked?: boolean | undefined;
+        id?: string;
+        label?: string;
+        checked?: boolean;
         valid: boolean;
         invalid: boolean;
         required: boolean;

package/dist/components/form/CheckboxKvPList.svelte.d.ts

@@ -5,9 +5,9 @@ declare const __propDef: {
         source: any;
         target: any;
         title: any;
-        description?: string | undefined;
+        description?: string;
         key: any;
-        help?: boolean | undefined;
+        help?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/CheckboxList.svelte.d.ts

@@ -4,7 +4,7 @@ declare const __propDef: {
         source: any;
         target: any;
         title: any;
-        description?: string | undefined;
+        description?: string;
         key: any;
     };
     events: {

package/dist/components/form/DateInput.svelte.d.ts

@@ -1,15 +1,15 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        label?: string | undefined;
-        value?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        feedback?: string[] | undefined;
-        help?: boolean | undefined;
-        disabled?: boolean | undefined;
+        id?: string;
+        label?: string;
+        value?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        required?: boolean;
+        feedback?: string[];
+        help?: boolean;
+        disabled?: boolean;
     };
     events: {
         input: Event;

package/dist/components/form/InputContainer.svelte.d.ts

@@ -1,11 +1,11 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        label?: string | undefined;
+        id?: string;
+        label?: string;
         required: boolean;
         feedback: string[];
-        help?: boolean | undefined;
+        help?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/form/NumberInput.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        label?: string | undefined;
-        value?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        feedback?: string[] | undefined;
-        placeholder?: string | undefined;
-        help?: boolean | undefined;
-        disabled?: boolean | undefined;
+        id?: string;
+        label?: string;
+        value?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        required?: boolean;
+        feedback?: string[];
+        placeholder?: string;
+        help?: boolean;
+        disabled?: boolean;
     };
     events: {
         input: Event;

package/dist/components/form/TextArea.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        label?: string | undefined;
-        value?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        feedback?: string[] | undefined;
-        placeholder?: string | undefined;
-        help?: boolean | undefined;
-        disabled?: boolean | undefined;
+        id?: string;
+        label?: string;
+        value?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        required?: boolean;
+        feedback?: string[];
+        placeholder?: string;
+        help?: boolean;
+        disabled?: boolean;
     };
     events: {
         input: Event;

package/dist/components/form/TextInput.svelte.d.ts

@@ -1,16 +1,16 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        id?: string | undefined;
-        label?: string | undefined;
-        value?: string | undefined;
-        valid?: boolean | undefined;
-        invalid?: boolean | undefined;
-        required?: boolean | undefined;
-        feedback?: string[] | undefined;
-        placeholder?: string | undefined;
-        help?: boolean | undefined;
-        disabled?: boolean | undefined;
+        id?: string;
+        label?: string;
+        value?: string;
+        valid?: boolean;
+        invalid?: boolean;
+        required?: boolean;
+        feedback?: string[];
+        placeholder?: string;
+        help?: boolean;
+        disabled?: boolean;
     };
     events: {
         input: Event;

package/dist/components/page/Alert.svelte

@@ -5,8 +5,7 @@ export let title = "";
 export let message = "";
 export let cssClass = "";
 export let deleteBtn = true;
-$:
-  show = true;
+$: show = true;
 </script>
 
 {#if show}

package/dist/components/page/Alert.svelte.d.ts

@@ -1,10 +1,10 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        title?: string | undefined;
-        message?: string | undefined;
-        cssClass?: string | undefined;
-        deleteBtn?: boolean | undefined;
+        title?: string;
+        message?: string;
+        cssClass?: string;
+        deleteBtn?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Docs.svelte.d.ts

@@ -2,7 +2,7 @@ import { SvelteComponent } from "svelte";
 import type { linkType } from '../../models/Models';
 declare const __propDef: {
     props: {
-        links?: linkType[] | undefined;
+        links?: linkType[];
         note: string;
     };
     events: {

package/dist/components/page/Footer.svelte

@@ -1,8 +1,7 @@
 <script>import { onMount } from "svelte";
 import { getFooter } from "./PageCaller";
 let content = "";
-$:
-  content;
+$: content;
 onMount(async () => {
   content = await getFooter();
 });

package/dist/components/page/Header.svelte

@@ -1,8 +1,7 @@
 <script>import { onMount } from "svelte";
 import { getHeader } from "./PageCaller";
 let content = "";
-$:
-  content;
+$: content;
 onMount(async () => {
   console.log("header");
   content = await getHeader();

package/dist/components/page/HelpPopUp.svelte

@@ -5,13 +5,11 @@ import { popup } from "@skeletonlabs/skeleton";
 import delay from "delay";
 export let active = false;
 let hs;
-$:
-  helpStore.subscribe((value) => {
-    hs = value;
-  });
+$: helpStore.subscribe((value) => {
+  hs = value;
+});
 let helpItem = { id: void 0, name: "", description: "" };
-$:
-  helpItem = active === true ? hs.itemId == "" ? { id: void 0, name: "", description: "" } : hs.helpItems.find((h) => h.id === hs.itemId) : { id: void 0, name: "", description: "" };
+$: helpItem = active === true ? hs.itemId == "" ? { id: void 0, name: "", description: "" } : hs.helpItems.find((h) => h.id === hs.itemId) : { id: void 0, name: "", description: "" };
 const helpClick = {
   event: "click",
   target: "helpTarget",

package/dist/components/page/HelpPopUp.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        active?: boolean | undefined;
+        active?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Notification.svelte

@@ -4,10 +4,8 @@ import { notificationStore } from "../../stores/pageStores";
 import { notificationType } from "../../models/Enums";
 const toastStore = getToastStore();
 let btnStyle;
-$:
-  btnStyle = $notificationStore === void 0 || $notificationStore.btnStyle === void 0 ? notificationStore.getBtnStyle() : $notificationStore.btnStyle;
-$:
-  $notificationStore, triggerToast();
+$: btnStyle = $notificationStore === void 0 || $notificationStore.btnStyle === void 0 ? notificationStore.getBtnStyle() : $notificationStore.btnStyle;
+$: $notificationStore, triggerToast();
 onMount(() => {
   toastStore.clear();
 });

package/dist/components/page/Page.svelte.d.ts

@@ -3,14 +3,14 @@ import type { linkType } from '../../models/Models';
 import { pageContentLayoutType } from '../../models/Enums';
 declare const __propDef: {
     props: {
-        title?: string | undefined;
-        note?: string | undefined;
-        links?: linkType[] | undefined;
-        menu?: boolean | undefined;
-        footer?: boolean | undefined;
-        help?: boolean | undefined;
-        contentLayoutType?: pageContentLayoutType | undefined;
-        fixLeft?: boolean | undefined;
+        title?: string;
+        note?: string;
+        links?: linkType[];
+        menu?: boolean;
+        footer?: boolean;
+        help?: boolean;
+        contentLayoutType?: pageContentLayoutType;
+        fixLeft?: boolean;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Spinner.svelte.d.ts

@@ -2,9 +2,9 @@ import { SvelteComponent } from "svelte";
 import { positionType } from '../../models/Enums';
 declare const __propDef: {
     props: {
-        textCss?: string | undefined;
-        label?: string | undefined;
-        position?: positionType | undefined;
+        textCss?: string;
+        label?: string;
+        position?: positionType;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/TablePlaceholder.svelte.d.ts

@@ -1,8 +1,8 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        cols?: number | undefined;
-        rows?: number | undefined;
+        cols?: number;
+        rows?: number;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/breadcrumb/Breadcrumb.svelte

@@ -3,20 +3,17 @@ import { browser } from "$app/environment";
 import { onMount } from "svelte";
 import { getApplicationName } from "./BreadcrumbDataCaller";
 export let title;
-$:
-  update(title);
+$: update(title);
 function update(t) {
   if (browser) {
     breadcrumbStore.updateItem({ label: t, link: window.location.pathname });
   }
 }
 let list = [];
-$:
-  list;
-$:
-  breadcrumbStore.subscribe((value) => {
-    list = value?.items;
-  });
+$: list;
+$: breadcrumbStore.subscribe((value) => {
+  list = value?.items;
+});
 let applicationName = "BEXIS2";
 onMount(async () => {
   applicationName = await getApplicationName();

package/dist/components/toggle/Toggle.svelte

@@ -14,21 +14,14 @@ const cTransition = `transition-all duration-[200ms]`;
 const cTrack = "cursor-pointer";
 const cThumb = "aspect-square scale-[0.8] flex justify-center items-center";
 const cIcon = "w-[70%] aspect-square";
-$:
-  trackBg = mode === true ? bgLight : bgDark;
-$:
-  thumbBg = mode === true ? bgDark : bgLight;
-$:
-  thumbPosition = mode === true ? "translate-x-[100%]" : "";
-$:
-  iconFill = mode === true ? fillLight : fillDark;
-$:
-  classesTrack = `${cTrack} ${cTransition} ${width} ${height} ${ring} ${rounded} ${trackBg} ${$$props.class ?? ""}`;
-$:
-  classesThumb = `${cThumb} ${cTransition} ${height} ${rounded} ${thumbBg} ${thumbPosition}`;
+$: trackBg = mode === true ? bgLight : bgDark;
+$: thumbBg = mode === true ? bgDark : bgLight;
+$: thumbPosition = mode === true ? "translate-x-[100%]" : "";
+$: iconFill = mode === true ? fillLight : fillDark;
+$: classesTrack = `${cTrack} ${cTransition} ${width} ${height} ${ring} ${rounded} ${trackBg} ${$$props.class ?? ""}`;
+$: classesThumb = `${cThumb} ${cTransition} ${height} ${rounded} ${thumbBg} ${thumbPosition}`;
 let mode = true;
-$:
-  mode;
+$: mode;
 </script>
 
 <div

package/dist/components/toggle/Toggle.svelte.d.ts

@@ -1,16 +1,17 @@
 import { SvelteComponent } from "svelte";
+import type { CssClasses } from '@skeletonlabs/skeleton';
 declare const __propDef: {
     props: {
         [x: string]: any;
         title?: string | undefined;
-        bgLight?: string | undefined;
-        bgDark?: string | undefined;
-        fillLight?: string | undefined;
-        fillDark?: string | undefined;
-        width?: string | undefined;
-        height?: string | undefined;
-        ring?: string | undefined;
-        rounded?: string | undefined;
+        bgLight?: CssClasses | undefined;
+        bgDark?: CssClasses | undefined;
+        fillLight?: CssClasses | undefined;
+        fillDark?: CssClasses | undefined;
+        width?: CssClasses | undefined;
+        height?: CssClasses | undefined;
+        ring?: CssClasses | undefined;
+        rounded?: CssClasses | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/models/Models.d.ts

@@ -80,6 +80,12 @@ export interface Column {
 export interface Columns {
     [key: string]: Column;
 }
+export type ServerConfig = {
+    baseUrl?: string;
+    sendModel: Send;
+    entityId?: number;
+    versionId?: number;
+};
 export interface TableConfig<T> {
     id: string;
     data: Writable<T[]>;
@@ -94,12 +100,7 @@ export interface TableConfig<T> {
     pageSizes?: number[];
     defaultPageSize?: number;
     optionsComponent?: typeof SvelteComponent;
-    serverSide?: boolean;
-    URL?: string;
-    token?: string;
-    sendModel?: Send;
-    entityId?: number;
-    versionId?: number;
+    server?: ServerConfig;
 }
 export interface keyValuePairType {
     id: number;
@@ -150,6 +151,13 @@ export type Filter = {
     filterBy: FilterOptionsEnum;
     value: string | number | Date | boolean;
 };
+export type FacetOption = {
+    value: string;
+    count?: number;
+};
+export type FacetGroup = {
+    [key: string]: FacetOption[];
+};
 export declare class Send {
     id: number;
     limit: number;

package/dist/stores/apiStores.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import { errorType } from '../models/Models';
 export declare let host: string;
 export declare let username: string;

package/dist/stores/pageStores.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="svelte" />
 import type { helpItemType, helpStoreType, notificationItemType, notificationStoreType } from '../models/Models';
 import type { MenuModel, breadcrumbItemType } from '../models/Page';
 import { BreadcrumbModel } from '../models/Page';