@bexis2/bexis2-core-ui 0.4.7 → 0.4.9

package/README.md

@@ -1,4 +1,11 @@
-# bexis-core-ui
+# bexis2-core-ui
+## 0.4.9
+- update npm packages
+  
+## 0.4.8
+- page
+  - add notification if api call to backend faild
+
 ## 0.4.7
 - menu
   - remove capitalization from menu item

package/dist/components/CodeEditor/CodeEditor.svelte

@@ -53,8 +53,7 @@ const isValidJS = (str) => {
   }
   return true;
 };
-$:
-  isValid = language === "json" ? isValidJSON(value) : language === "js" ? isValidJS(value) : true;
+$: isValid = language === "json" ? isValidJSON(value) : language === "js" ? isValidJS(value) : true;
 </script>
 
 <div class="grid items-stretch justify-stretch gap-1">

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

@@ -2,14 +2,14 @@ import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
         id: string;
-        title?: string | undefined;
-        initialValue?: string | undefined;
-        value?: string | undefined;
-        language?: string | undefined;
-        dark?: boolean | undefined;
-        toggle?: boolean | undefined;
-        actions?: boolean | undefined;
-        isValid?: boolean | undefined;
+        title?: string;
+        initialValue?: string;
+        value?: string;
+        language?: string;
+        dark?: boolean;
+        toggle?: boolean;
+        actions?: boolean;
+        isValid?: boolean;
         styles?: any;
     };
     events: {

package/dist/components/File/FileUploader.svelte

@@ -15,16 +15,13 @@ export let submit = "";
 export let context = "";
 export let data;
 let isUploading = false;
-$:
-  model = data;
-$:
-  submitBt = "submit";
+$: model = data;
+$: submitBt = "submit";
 let maxSize = 0;
 const dispatch = createEventDispatcher();
 let fx;
 let files = { accepted: [], rejected: [] };
-$:
-  files;
+$: files;
 onMount(async () => {
   if (!data) {
     load();

package/dist/components/File/FileUploader.svelte.d.ts

@@ -2,11 +2,11 @@ import { SvelteComponent } from "svelte";
 import type { fileUploaderType } from '../../models/Models.js';
 declare const __propDef: {
     props: {
-        id?: number | undefined;
-        version?: number | undefined;
-        start?: string | undefined;
-        submit?: string | undefined;
-        context?: string | undefined;
+        id?: number;
+        version?: number;
+        start?: string;
+        submit?: string;
+        context?: string;
         data: fileUploaderType | undefined;
     };
     events: {

package/dist/components/Table/Table.svelte

@@ -2,9 +2,7 @@
 export let config;
 let fetched = false;
 const data = config.data;
-$:
-  if ($data.length > 0)
-    fetched = true;
+$: if ($data.length > 0) fetched = true;
 </script>
 
 {#key fetched}

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

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

package/dist/components/Table/TableContent.svelte

@@ -301,12 +301,9 @@ const sortServer = (order, id) => {
   $pageIndex = 0;
   updateTable();
 };
-$:
-  sortKeys = pluginStates.sort.sortKeys;
-$:
-  serverSide && updateTable();
-$:
-  serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
+$: sortKeys = pluginStates.sort.sortKeys;
+$: serverSide && updateTable();
+$: serverSide && sortServer($sortKeys[0]?.order, $sortKeys[0]?.id);
 </script>
 
 <div class="grid gap-2 overflow-auto" class:w-fit={!fitToScreen} class:w-full={fitToScreen}>

package/dist/components/Table/TableFilter.svelte

@@ -179,14 +179,11 @@ const clearFilters = () => {
   dropdowns = [];
   $filters[id] = {};
 };
-$:
-  type = isDate ? "date" : type;
-$:
-  remainingFilters = options[type].filter(
-    (option) => !Object.keys($filters[id]).includes(option.value)
-  );
-$:
-  addFilter(options[type][0].value, void 0);
+$: type = isDate ? "date" : type;
+$: remainingFilters = options[type].filter(
+  (option) => !Object.keys($filters[id]).includes(option.value)
+);
+$: addFilter(options[type][0].value, void 0);
 </script>
 
 <form class="">

package/dist/components/Table/TableFilterServer.svelte

@@ -173,16 +173,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

@@ -23,14 +23,10 @@ const handleChange = (e) => {
     $pageIndex = value - 1;
   }
 };
-$:
-  goToFirstPageDisabled = !$pageIndex;
-$:
-  goToLastPageDisabled = $pageIndex == $pageCount - 1;
-$:
-  goToNextPageDisabled = !$hasNextPage;
-$:
-  goToPreviousPageDisabled = !$hasPreviousPage;
+$: goToFirstPageDisabled = !$pageIndex;
+$: goToLastPageDisabled = $pageIndex == $pageCount - 1;
+$: goToNextPageDisabled = !$hasNextPage;
+$: goToPreviousPageDisabled = !$hasPreviousPage;
 </script>
 
 <div class="flex justify-between w-full items-stretch gap-10">

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>
 

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

@@ -1,5 +1,5 @@
 <script>import { onMount } from "svelte";
-import { pageContentLayoutType } from "../../models/Enums";
+import { pageContentLayoutType, notificationType } from "../../models/Enums";
 import { AppShell, AppBar } from "@skeletonlabs/skeleton";
 import Menu from "./menu/Menu.svelte";
 import Footer from "./Footer.svelte";
@@ -9,7 +9,8 @@ import Breadcrumb from "./breadcrumb/Breadcrumb.svelte";
 import Notification from "./Notification.svelte";
 import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
 import { storePopup } from "@skeletonlabs/skeleton";
-import { breadcrumbStore } from "../../stores/pageStores";
+import { breadcrumbStore, notificationStore } from "../../stores/pageStores";
+import { errorStore } from "../../stores/apiStores";
 storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import Docs from "./Docs.svelte";
 import GoToTop from "./GoToTop.svelte";
@@ -21,6 +22,13 @@ export let footer = true;
 export let help = false;
 export let contentLayoutType = pageContentLayoutType.center;
 export let fixLeft = true;
+errorStore.subscribe((error) => {
+  console.log("\u{1F680} ~ errorStore.subscribe ~ value:", error.error);
+  notificationStore.showNotification({
+    notificationType: notificationType.error,
+    message: error.error
+  });
+});
 onMount(async () => {
   console.log("page");
   breadcrumbStore.clean();

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

@@ -167,3 +167,10 @@ export declare class Receive {
     columns?: ServerColumn[];
     constructor();
 }
+export declare class errorType {
+    statusText: string;
+    status: number;
+    error: string;
+    stackTrace: string;
+    constructor();
+}

package/dist/models/Models.js

@@ -28,3 +28,16 @@ export class Receive {
         this.columns = [];
     }
 }
+export class errorType {
+    statusText;
+    status;
+    error;
+    stackTrace;
+    constructor() {
+        this.statusText = "";
+        this.status = 0;
+        this.error = "";
+        this.stackTrace = "";
+    }
+}
+;

package/dist/services/Api.js

@@ -1,6 +1,6 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password } from '../stores/apiStores';
+import { host, username, password, errorStore } from '../stores/apiStores';
 console.log('setup axios');
 // implement a method to execute all the request from here.
 const apiRequest = (method, url, request) => {
@@ -19,9 +19,19 @@ const apiRequest = (method, url, request) => {
         headers
     })
         .then((res) => {
+        // console.log("res",res);
         return Promise.resolve(res);
     })
-        .catch((err) => {
+        .catch((er) => {
+        //console.log("🚀 ~ apiRequest ~ err:", er)
+        const err = er.response;
+        let error = {
+            status: err.status,
+            statusText: err.statusText,
+            error: err.data.error,
+            stackTrace: err.data.stackTrace,
+        };
+        errorStore.set(error);
         return Promise.reject(err);
     });
 };

package/dist/stores/apiStores.d.ts

@@ -1,4 +1,6 @@
+import { errorType } from '../models/Models';
 export declare let host: string;
 export declare let username: string;
 export declare let password: string;
+export declare const errorStore: import("svelte/store").Writable<errorType>;
 export declare function setApiConfig(_host: string, _user: string, _pw: string): void;

package/dist/stores/apiStores.js

@@ -1,10 +1,12 @@
 import { writable } from 'svelte/store';
+import { errorType } from '../models/Models';
 export let host = 'window.location.origin';
 export let username = '';
 export let password = '';
 const hostStore = writable(''); //writable(window.location.origin);
 const usernameStore = writable('');
 const passwordStore = writable('');
+export const errorStore = writable(new errorType());
 hostStore.subscribe((value) => {
     host = value;
 });

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';

package/dist/stores/pageStores.js

@@ -95,7 +95,7 @@ function createBreadcrumbStore() {
             breadcrumbStore.subscribe((value) => {
                 value = value === undefined ? new BreadcrumbModel() : value;
                 let v = value.items.find((i) => i.link === item.link);
-                console.log(value.items, v);
+                //console.log(value.items, v);
                 if (v) {
                     const i = value.items.indexOf(v);
                     value.items[i] = item;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.7",
+  "version": "0.4.9",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -20,31 +20,31 @@
     "3.npm - publish": "npm publish --access public"
   },
   "devDependencies": {
-    "@playwright/test": "^1.43.0",
-    "@skeletonlabs/skeleton": "^2.9.0",
-    "@skeletonlabs/tw-plugin": "^0.3.1",
-    "@sveltejs/adapter-auto": "^3.2.0",
-    "@sveltejs/adapter-static": "^3.0.1",
-    "@sveltejs/package": "^2.3.1",
+    "@playwright/test": "^1.45.3",
+    "@skeletonlabs/skeleton": "^2.10.2",
+    "@skeletonlabs/tw-plugin": "^0.4.0",
+    "@sveltejs/adapter-auto": "^3.2.2",
+    "@sveltejs/adapter-static": "^3.0.2",
+    "@sveltejs/package": "^2.3.2",
     "@tailwindcss/forms": "^0.5.7",
-    "@tailwindcss/typography": "^0.5.12",
-    "@types/node": "^20.12.5",
-    "@typescript-eslint/eslint-plugin": "^7.5.0",
-    "@typescript-eslint/parser": "^7.5.0",
+    "@tailwindcss/typography": "^0.5.13",
+    "@types/node": "^22.0.2",
+    "@typescript-eslint/eslint-plugin": "^8.0.0",
+    "@typescript-eslint/parser": "^8.0.0",
     "autoprefixer": "^10.4.19",
-    "eslint": "^8.0.0",
-    "eslint-config-prettier": "^8.0.0",
-    "postcss": "^8.4.38",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.2",
+    "eslint": "^9.8.0",
+    "eslint-config-prettier": "^9.1.0",
+    "postcss": "^8.4.40",
+    "prettier": "^3.3.3",
+    "prettier-plugin-svelte": "^3.2.6",
     "raw-loader": "^4.0.2",
-    "svelte": "^4.2.12",
-    "svelte-check": "^3.6.9",
-    "tailwindcss": "^3.4.3",
-    "tslib": "^2.6.2",
-    "typescript": "^5.4.4",
-    "vite": "^5.2.8",
-    "vitest": "^1.4.0"
+    "svelte": "^4.2.18",
+    "svelte-check": "^3.8.5",
+    "tailwindcss": "^3.4.7",
+    "tslib": "^2.6.3",
+    "typescript": "^5.5.4",
+    "vite": "^5.3.5",
+    "vitest": "^2.0.5"
   },
   "type": "module",
   "module": "./src/lib/index.ts",
@@ -59,33 +59,33 @@
     "src/lib"
   ],
   "dependencies": {
-    "@codemirror/lang-html": "^6.4.8",
+    "@codemirror/lang-html": "^6.4.9",
     "@codemirror/lang-javascript": "^6.2.2",
     "@codemirror/lang-json": "^6.0.1",
-    "@codemirror/lint": "^6.5.0",
+    "@codemirror/lint": "^6.8.1",
     "@codemirror/theme-one-dark": "^6.1.2",
-    "@floating-ui/dom": "^1.6.3",
-    "@fortawesome/fontawesome-free": "^6.5.2",
-    "@fortawesome/fontawesome-svg-core": "^6.5.2",
-    "@fortawesome/free-regular-svg-icons": "^6.5.2",
-    "@fortawesome/free-solid-svg-icons": "^6.5.2",
-    "@sveltejs/kit": "^2.5.5",
-    "@sveltejs/vite-plugin-svelte": "^3.1.0",
-    "axios": "^1.6.8",
+    "@floating-ui/dom": "^1.6.8",
+    "@fortawesome/fontawesome-free": "^6.6.0",
+    "@fortawesome/fontawesome-svg-core": "^6.6.0",
+    "@fortawesome/free-regular-svg-icons": "^6.6.0",
+    "@fortawesome/free-solid-svg-icons": "^6.6.0",
+    "@sveltejs/kit": "^2.5.19",
+    "@sveltejs/vite-plugin-svelte": "^3.1.1",
+    "axios": "^1.7.3",
     "codemirror": "^6.0.1",
     "dateformat": "^5.0.3",
     "delay": "^6.0.0",
     "dotenv": "^16.4.5",
     "eslint4b-prebuilt": "^6.7.2",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.10.0",
     "highlightjs-svelte": "^1.0.6",
-    "svelte": "^4.2.12",
-    "svelte-codemirror-editor": "^1.3.0",
+    "svelte": "^4.2.18",
+    "svelte-codemirror-editor": "^1.4.0",
     "svelte-fa": "^4.0.2",
     "svelte-file-dropzone": "^2.0.7",
     "svelte-headless-table": "^0.18.2",
     "svelte-select": "5.8.3",
-    "vest": "^5.2.12"
+    "vest": "^5.4.0"
   },
   "author": "David Schöne",
   "license": "ISC",

package/src/lib/components/page/Page.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 
-	import type { linkType } from '$lib/models/Models';
-	import { pageContentLayoutType } from '$lib/models/Enums';
+	import type { errorType, linkType } from '$lib/models/Models';
+	import { pageContentLayoutType, notificationType } from '$lib/models/Enums';
 
 	// ui components
 	import { AppShell, AppBar } from '@skeletonlabs/skeleton';
@@ -16,7 +16,8 @@
 	//popup
 	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
 	import { storePopup } from '@skeletonlabs/skeleton';
-	import { breadcrumbStore } from '$store/pageStores';
+	import { breadcrumbStore,notificationStore } from '$store/pageStores';
+	import { errorStore } from '$store/apiStores';
 
 	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
@@ -38,6 +39,14 @@ import type { helpItemType, helpStoreType } from '$models/Models';
 	export let contentLayoutType: pageContentLayoutType = pageContentLayoutType.center;
 	export let fixLeft: boolean = true;
 
+	errorStore.subscribe((error:errorType) => {
+			console.log("🚀 ~ errorStore.subscribe ~ value:", error.error)
+			notificationStore.showNotification({
+				notificationType: notificationType.error,
+				message: error.error
+			})
+		})
+
 	onMount(async () => {
 		console.log('page');
 		breadcrumbStore.clean();

package/src/lib/models/Models.ts

@@ -221,3 +221,19 @@ export class Receive {
 		this.columns = [];
 	}
 }
+
+
+export class errorType {
+	statusText: string;
+	status: number;
+	error:string;
+	stackTrace:string
+
+	constructor() {
+		this.statusText = "";
+		this.status = 0;
+		this.error = "";
+		this.stackTrace = "";
+	}
+
+};

package/src/lib/services/Api.ts

@@ -1,6 +1,7 @@
 // Api.js
 import axios from 'axios';
-import { host, username, password } from '../stores/apiStores';
+import { host, username, password, errorStore } from '../stores/apiStores';
+import type { errorType } from '$models/Models';
 
 console.log('setup axios');
 
@@ -23,9 +24,24 @@ const apiRequest = (method, url, request) => {
 		headers
 	})
 		.then((res) => {
+			// console.log("res",res);
+			
 			return Promise.resolve(res);
+
 		})
-		.catch((err) => {
+		.catch((er) => {
+		//console.log("🚀 ~ apiRequest ~ err:", er)
+			const err = er.response;
+			
+			let error:errorType = {
+							status: err.status,
+							statusText: err.statusText,
+							error: err.data.error,
+							stackTrace: err.data.stackTrace,
+			}
+
+			errorStore.set(error);
+
 			return Promise.reject(err);
 		});
 };

package/src/lib/stores/apiStores.ts

@@ -1,4 +1,5 @@
 import { writable } from 'svelte/store';
+import { errorType } from '$models/Models'
 
 export let host = 'window.location.origin';
 export let username = '';
@@ -8,6 +9,8 @@ const hostStore = writable(''); //writable(window.location.origin);
 const usernameStore = writable('');
 const passwordStore = writable('');
 
+export const errorStore = writable(new errorType());
+
 hostStore.subscribe((value) => {
 	host = value;
 });

package/src/lib/stores/pageStores.ts

@@ -117,7 +117,7 @@ function createBreadcrumbStore() {
 				value = value === undefined ? new BreadcrumbModel() : value;
 
 				let v = value.items.find((i) => i.link === item.link);
-				console.log(value.items, v);
+				//console.log(value.items, v);
 
 				if (v) {
 					const i = value.items.indexOf(v);