@bexis2/bexis2-core-ui 0.2.9 → 0.2.11

package/README.md

@@ -1,4 +1,11 @@
 # bexis-core-ui
+## v0.2.11
+- Error Message
+- Spinner Update
+  - postion default is center
+- Surface color changed
+- Page: contentPageLayoutType
+
 ## v0.2.9
 - helpStore
 - helpStoreType

package/dist/components/page/ErrorMessage.svelte

@@ -0,0 +1,9 @@
+<script>export let error;
+</script>
+
+<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
+<div class="p-5  space-y-4">
+ <h3 class="h3">{error.name}</h3> 
+ <p>{error.message}</p>
+</div>
+</div>

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

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        error: Error;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ErrorMessageProps = typeof __propDef.props;
+export type ErrorMessageEvents = typeof __propDef.events;
+export type ErrorMessageSlots = typeof __propDef.slots;
+export default class ErrorMessage extends SvelteComponentTyped<ErrorMessageProps, ErrorMessageEvents, ErrorMessageSlots> {
+}
+export {};

package/dist/components/page/Page.svelte

@@ -1,5 +1,6 @@
 <script>import { onMount } from "svelte";
-import { AppShell, AppBar } from "@skeletonlabs/skeleton";
+import { pageContentLayoutType } from "../../models/Enums";
+import { AppShell, AppBar, Modal } from "@skeletonlabs/skeleton";
 import Menu from "./menu/Menu.svelte";
 import Footer from "./Footer.svelte";
 import Header from "./Header.svelte";
@@ -17,6 +18,7 @@ export let links = [];
 export let menu = true;
 export let footer = true;
 export let help = false;
+export let contentLayoutType = pageContentLayoutType.center;
 onMount(async () => {
   console.log("page");
   breadcrumbStore.clean();
@@ -60,9 +62,21 @@ onMount(async () => {
   </div>
   {/if}
 
+  {#if contentLayoutType === pageContentLayoutType.center}
+
+  <div class="flex justify-center w-screen ">
+    <div class="max-w-7xl  p-5 space-y-5 border-y border-solid border-surface-500">
+      <slot/>
+    </div>
+  </div>
+  {/if}
+
+  {#if contentLayoutType === pageContentLayoutType.full}
   <div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
      <slot/>
   </div>
+  
+  {/if}
 
 
   {#if $$slots.right}

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

@@ -1,5 +1,6 @@
 import { SvelteComponentTyped } from "svelte";
 import type { linkType } from "../../models/Models";
+import { pageContentLayoutType } from "../../models/Enums";
 declare const __propDef: {
     props: {
         title?: string | undefined;
@@ -8,6 +9,7 @@ declare const __propDef: {
         menu?: boolean | undefined;
         footer?: boolean | undefined;
         help?: boolean | undefined;
+        contentLayoutType?: pageContentLayoutType | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/dist/components/page/Spinner.svelte

@@ -1,12 +1,12 @@
 <script>import { positionType } from "../../models/Enums";
-export let textCss = "text-secundary-500";
+export let textCss = "text-surface-600";
 export let label = "";
-export let position = positionType.start;
+export let position = positionType.center;
 </script>
 
-<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
 <div
-	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] {textCss}"
+	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] "
 	role="status"
 >
 	<span

package/dist/css/themes/theme-bexis2.css

@@ -82,16 +82,16 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-/* surface | #dddddd */
---color-surface-50: 250 250 250; /* ⬅ #fafafa */
---color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
---color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
---color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
---color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
---color-surface-500: 221 221 221; /* ⬅ #dddddd */
---color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
---color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
---color-surface-800: 133 133 133; /* ⬅ #858585 */
---color-surface-900: 80 80 80; /* ⬅ #6c6c6c */
+/* surface | #c7c7c7 */
+--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
+--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
+--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
+--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
+--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
+--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
+--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
+--color-surface-700: 149 149 149; /* ⬅ #959595 */
+--color-surface-800: 119 119 119; /* ⬅ #777777 */
+--color-surface-900: 98 98 98; /* ⬅ #626262 */
 
 }

package/dist/index.d.ts

@@ -7,6 +7,7 @@ import Spinner from './components/page/Spinner.svelte';
 import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';
 import Menu from './components/page/menu/Menu.svelte';
+import ErrorMessage from './components/page/ErrorMessage.svelte';
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
 import CheckboxList from './components/form/CheckboxList.svelte';
@@ -22,12 +23,12 @@ import { columnFilter, searchFilter } from './components/Table/filter';
 import type { TableConfig, Columns, Column } from './models/Models';
 export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiSelect, NumberInput, TextArea, TextInput };
 export { FileInfo, FileIcon, FileUploader };
-export { ListView, TableView, Spinner, Page, Alert, Menu };
+export { ListView, TableView, Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
 export type { userType, inputType, fileUploaderModel, linkType, listItemType, keyValuePairType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';
-export { positionType } from './models/Enums';
+export { positionType, pageContentLayoutType } from './models/Enums';
 export { Table, TableFilter, columnFilter, searchFilter };
 export type { TableConfig, Columns, Column };

package/dist/index.js

@@ -9,6 +9,7 @@ import Spinner from './components/page/Spinner.svelte';
 import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';
 import Menu from './components/page/menu/Menu.svelte';
+import ErrorMessage from './components/page/ErrorMessage.svelte';
 // input 
 import Checkbox from './components/form/Checkbox.svelte';
 import CheckboxKVPList from './components/form/CheckboxKvPList.svelte';
@@ -28,13 +29,13 @@ export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DropdownKVP, MultiS
 //File
 export { FileInfo, FileIcon, FileUploader };
 //others
-export { ListView, TableView, Spinner, Page, Alert, Menu };
+export { ListView, TableView, Spinner, Page, Alert, Menu, ErrorMessage };
 //Api
 export { Api } from './services/Api.js';
 export { host, username, password, setApiConfig } from './stores/apiStores.js';
 //help
 export { helpStore } from './stores/pageStores';
 //enum
-export { positionType } from './models/Enums';
+export { positionType, pageContentLayoutType } from './models/Enums';
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/dist/models/Enums.d.ts

@@ -3,3 +3,7 @@ export declare enum positionType {
     end = "end",
     center = "center"
 }
+export declare enum pageContentLayoutType {
+    full = "full",
+    center = "center"
+}

package/dist/models/Enums.js

@@ -4,3 +4,8 @@ export var positionType;
     positionType["end"] = "end";
     positionType["center"] = "center";
 })(positionType || (positionType = {}));
+export var pageContentLayoutType;
+(function (pageContentLayoutType) {
+    pageContentLayoutType["full"] = "full";
+    pageContentLayoutType["center"] = "center";
+})(pageContentLayoutType || (pageContentLayoutType = {}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.2.9",
+  "version": "0.2.11",
   "private": false,
   "scripts": {
     "dev": "vite dev",

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

@@ -0,0 +1,12 @@
+<script lang="ts">
+
+ export let error:Error;
+
+</script>
+
+<div class="card bg-error-300 border-solid border-2 border-error-500 shadow-md max-w-md">
+<div class="p-5  space-y-4">
+ <h3 class="h3">{error.name}</h3> 
+ <p>{error.message}</p>
+</div>
+</div>

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

@@ -2,9 +2,10 @@
   import {onMount} from 'svelte'
 
   import type { linkType } from "$lib/models/Models";
+  import { pageContentLayoutType } from "$lib/models/Enums";
 
   // ui components
-  import { AppShell, AppBar } from '@skeletonlabs/skeleton';
+  import { AppShell, AppBar, Modal } from '@skeletonlabs/skeleton';
   import Menu from './menu/Menu.svelte'
   import Footer from './Footer.svelte'
   import Header from './Header.svelte'
@@ -16,6 +17,7 @@
   import { storePopup } from '@skeletonlabs/skeleton';
   import { breadcrumbStore } from '$store/pageStores';
 
+
   storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
 
@@ -31,6 +33,7 @@
   export let menu:boolean = true;
   export let footer:boolean = true;
   export let help:boolean = false;
+  export let contentLayoutType:pageContentLayoutType = pageContentLayoutType.center;
 
   onMount(async () => {
     console.log("page")
@@ -76,9 +79,21 @@
   </div>
   {/if}
 
+  {#if contentLayoutType === pageContentLayoutType.center}
+
+  <div class="flex justify-center w-screen ">
+    <div class="max-w-7xl  p-5 space-y-5 border-y border-solid border-surface-500">
+      <slot/>
+    </div>
+  </div>
+  {/if}
+
+  {#if contentLayoutType === pageContentLayoutType.full}
   <div class="p-5 space-y-5 border-y border-solid border-surface-500 w-screen">
      <slot/>
   </div>
+  
+  {/if}
 
 
   {#if $$slots.right}

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

@@ -1,15 +1,15 @@
 <script lang="ts">
  import { positionType } from "$lib/models/Enums";
 
-	export let textCss = "text-secundary-500"
+	export let textCss = "text-surface-600"
 	export let label = "";
-	export let position:positionType = positionType.start;
+	export let position:positionType = positionType.center;
 
 </script>
 
-<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2">
+<div class="flex justify-{position} items-{position} h-full w-full gap-5 pt-2 {textCss}">
 <div
-	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] {textCss}"
+	class="inline-block h-8 w-8 animate-spin rounded-full border-4 border-solid border-current border-r-transparent align-[-0.125em] motion-reduce:animate-[spin_1.5s_linear_infinite] "
 	role="status"
 >
 	<span

package/src/lib/css/themes/theme-bexis2.css

@@ -82,16 +82,16 @@
 	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
 	--color-error-800: 153 0 0; /* ⬅ #990000 */
 	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
-/* surface | #dddddd */
---color-surface-50: 250 250 250; /* ⬅ #fafafa */
---color-surface-100: 248 248 248; /* ⬅ #f8f8f8 */
---color-surface-200: 247 247 247; /* ⬅ #f7f7f7 */
---color-surface-300: 241 241 241; /* ⬅ #f1f1f1 */
---color-surface-400: 231 231 231; /* ⬅ #e7e7e7 */
---color-surface-500: 221 221 221; /* ⬅ #dddddd */
---color-surface-600: 199 199 199; /* ⬅ #c7c7c7 */
---color-surface-700: 166 166 166; /* ⬅ #a6a6a6 */
---color-surface-800: 133 133 133; /* ⬅ #858585 */
---color-surface-900: 80 80 80; /* ⬅ #6c6c6c */
+/* surface | #c7c7c7 */
+--color-surface-50: 247 247 247; /* ⬅ #f7f7f7 */
+--color-surface-100: 244 244 244; /* ⬅ #f4f4f4 */
+--color-surface-200: 241 241 241; /* ⬅ #f1f1f1 */
+--color-surface-300: 233 233 233; /* ⬅ #e9e9e9 */
+--color-surface-400: 216 216 216; /* ⬅ #d8d8d8 */
+--color-surface-500: 199 199 199; /* ⬅ #c7c7c7 */
+--color-surface-600: 179 179 179; /* ⬅ #b3b3b3 */
+--color-surface-700: 149 149 149; /* ⬅ #959595 */
+--color-surface-800: 119 119 119; /* ⬅ #777777 */
+--color-surface-900: 98 98 98; /* ⬅ #626262 */
 
 }

package/src/lib/index.ts

@@ -11,6 +11,7 @@ import Spinner from './components/page/Spinner.svelte';
 import Page from './components/page/Page.svelte';
 import Alert from './components/page/Alert.svelte';
 import Menu from './components/page/menu/Menu.svelte';
+import ErrorMessage from './components/page/ErrorMessage.svelte';
 
 // input 
 import Checkbox from './components/form/Checkbox.svelte';
@@ -46,7 +47,7 @@ export {
 export { FileInfo, FileIcon, FileUploader };
 
 //others
-export { ListView, TableView, Spinner, Page, Alert, Menu };
+export { ListView, TableView, Spinner, Page, Alert, Menu, ErrorMessage };
 
 //Api
 export { Api } from './services/Api.js';
@@ -68,7 +69,7 @@ export type { helpStoreType, helpItemType } from './models/Models';
 
 
 //enum
-export { positionType	} from './models/Enums';
+export { positionType, pageContentLayoutType	} from './models/Enums';
 
 // Table
 export { Table, TableFilter, columnFilter, searchFilter };

package/src/lib/models/Enums.ts

@@ -3,4 +3,9 @@ export enum positionType {
 	start = "start",
 	end = "end",
  center = "center"
+}
+
+export enum pageContentLayoutType {
+	full = "full",
+	center = "center"
 }