@bexis2/bexis2-core-ui 0.4.83 → 0.4.85

package/dist/css/core.ui.postcss

@@ -1,7 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 /*place global styles here */
 html,
 body {
-	@apply h-full;
+	@apply h-full bg-white text-sm leading-tight;
+}
+
+[type='text']:focus {
+	--tw-ring-color: #00000;
 }
 
 h1 {
@@ -12,11 +21,20 @@ h2 {
 	@apply text-primary-500;
 }
 
+input {
+	@apply pb-1 pt-1
+}
 
-:root {
-	--background: rgb(var(--color-surface-200));
+.svelte-select,
+.svelte-select-list {
+	@apply dark:!bg-zinc-700 border dark:!border-zinc-500;
 }
 
-[type='text']:focus {
-	--tw-ring-color: #00000;
+.multi-item {
+	@apply dark:!bg-zinc-500 dark:!outline-zinc-400;
 }
+
+.list-item .item.hover:not(.active):not(.list-group-title) {
+	@apply dark:!text-black;
+}
+

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

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}

package/dist/services/Api.d.ts

@@ -1,7 +1,7 @@
 export declare const Api: {
-    get: (url: any, request?: string, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    delete: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    post: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    put: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
-    patch: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any>>;
+    get: (url: any, request?: string, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    delete: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    post: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    put: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
+    patch: (url: any, request: any, headers?: {}, config?: {}) => Promise<import("axios").AxiosResponse<any, any, {}>>;
 };

package/dist/themes/theme-bexis2 copy.d.ts

@@ -0,0 +1,2 @@
+import type { CustomThemeConfig } from '@skeletonlabs/tw-plugin';
+export declare const bexis2theme: CustomThemeConfig;

package/dist/themes/theme-bexis2 copy.js

@@ -0,0 +1,112 @@
+export const bexis2theme = {
+    name: 'bexis2theme',
+    properties: {
+        // =~= Theme Properties =~=
+        '--theme-font-family-base': `system-ui`,
+        '--theme-font-family-heading': `system-ui`,
+        '--theme-font-color-base': 'var(--color-surface-900)',
+        '--theme-font-color-dark': '#ffffff',
+        '--theme-rounded-base': '4px',
+        '--theme-rounded-container': '4px',
+        '--theme-border-base': '1px',
+        // =~= Theme On-X Colors =~=
+        '--on-primary': '255 255 255',
+        '--on-secondary': '255 255 255',
+        '--on-tertiary': '0 0 0',
+        '--on-success': '255 255 255',
+        '--on-warning': '255 255 255',
+        '--on-error': '255 255 255',
+        '--on-surface': '255 255 255',
+        // =~= Theme Colors  =~=
+        // primary | #45b2a1
+        '--color-primary-50': '#e3f3f1',
+        '--color-primary-100': '#daf0ec',
+        '--color-primary-200': '#d1ece8',
+        '--color-primary-300': '#b5e0d9',
+        '--color-primary-400': '#7dc9bd',
+        '--color-primary-500': '#45b2a1',
+        '--color-primary-600': '#3ea091',
+        '--color-primary-700': '#348679',
+        '--color-primary-800': '#296b61',
+        '--color-primary-900': '#22574f',
+        // secondary | #ff9700
+        '--color-secondary-50': '#ffefd9',
+        '--color-secondary-100': '#ffeacc',
+        '--color-secondary-200': '#ffe5bf',
+        '--color-secondary-300': '#ffd599',
+        '--color-secondary-400': '#ffb64d',
+        '--color-secondary-500': '#ff9700',
+        '--color-secondary-600': '#e68800',
+        '--color-secondary-700': '#bf7100',
+        '--color-secondary-800': '#995b00',
+        '--color-secondary-900': '#7d4a00',
+        // tertiary | #bee1da
+        '--color-tertiary-50': '#f5fbf9',
+        '--color-tertiary-100': '#f2f9f8',
+        '--color-tertiary-200': '#eff8f6',
+        '--color-tertiary-300': '#e5f3f0',
+        '--color-tertiary-400': '#d2eae5',
+        '--color-tertiary-500': '#bee1da',
+        '--color-tertiary-600': '#abcbc4',
+        '--color-tertiary-700': '#8fa9a4',
+        '--color-tertiary-800': '#728783',
+        '--color-tertiary-900': '#5d6e6b',
+        // success | #4BB543
+        '--color-success-50': '#e4f4e3',
+        '--color-success-100': '#dbf0d9',
+        '--color-success-200': '#d2edd0',
+        '--color-success-300': '#b7e1b4',
+        '--color-success-400': '#81cb7b',
+        '--color-success-500': '#4bb543',
+        '--color-success-600': '#44a33c',
+        '--color-success-700': '#388832',
+        '--color-success-800': '#2d6d28',
+        '--color-success-900': '#255921',
+        // warning | #EAB308
+        '--color-warning-50': '#fcf4da',
+        '--color-warning-100': '#fbf0ce',
+        '--color-warning-200': '#faecc1',
+        '--color-warning-300': '#f7e19c',
+        '--color-warning-400': '#f0ca52',
+        '--color-warning-500': '#eab308',
+        '--color-warning-600': '#d3a107',
+        '--color-warning-700': '#b08606',
+        '--color-warning-800': '#8c6b05',
+        '--color-warning-900': '#735804',
+        // error | #FF0000
+        '--color-error-50': '#ffd9d9',
+        '--color-error-100': '#ffcccc',
+        '--color-error-200': '#ffbfbf',
+        '--color-error-300': '#ff9999',
+        '--color-error-400': '#ff4d4d',
+        '--color-error-500': '#ff0000',
+        '--color-error-600': '#e60000',
+        '--color-error-700': '#bf0000',
+        '--color-error-800': '#990000',
+        '--color-error-900': '#7d0000',
+        // surface | #c7c7c7
+        '--color-surface-50': '#f7f7f7',
+        '--color-surface-100': '#f4f4f4',
+        '--color-surface-200': '#f1f1f1',
+        '--color-surface-300': '#e9e9e9',
+        '--color-surface-400': '#d8d8d8',
+        '--color-surface-500': '#c7c7c7',
+        '--color-surface-600': '#b3b3b3',
+        '--color-surface-700': '#959595',
+        '--color-surface-800': '#777777',
+        '--color-surface-900': '#626262'
+    },
+    properties_dark: {
+        // surface | #2e2e2e
+        '--color-surface-50': '#e0e0e0',
+        '--color-surface-100': '#d5d5d5',
+        '--color-surface-200': '#cbcbcb',
+        '--color-surface-300': '#ababab',
+        '--color-surface-400': '#6d6d6d',
+        '--color-surface-500': '#2e2e2e',
+        '--color-surface-600': '#292929',
+        '--color-surface-700': '#232323',
+        '--color-surface-800': '#1c1c1c',
+        '--color-surface-900': '#171717'
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.83",
+  "version": "0.4.85",
   "private": false,
   "description": "Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).",
   "keywords": [

package/src/lib/components/form/InputContainer.svelte

@@ -44,7 +44,7 @@ let showDescription: boolean = false;
 		<div	class="card text-sm text-gray-500 p-2 mb-2">{@html description}</div>
 	{/if}
 	<slot />
-	<div class="">
+	<div class="min-h-5">
 	<span class="text-xs text-error-600 ">
 	{#if feedback}
 			<ul>

package/src/lib/components/page/menu/Menu.svelte

@@ -1,24 +1,53 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
+	import { writable } from 'svelte/store';
 	import { getMenuItems } from './MenuDataCaller';
-	import { menuStore } from "../../../stores/pageStores";
+	import { menuStore } from '../../../stores/pageStores';
 
 	import MenuBar from './MenuBar.svelte';
 	import MenuAccountBar from './MenuAccountBar.svelte';
 	import SettingsBar from './SettingsBar.svelte';
 	import Fa from 'svelte-fa';
-	import { faBars } from '@fortawesome/free-solid-svg-icons';
+	import { faBars, faPlus, faMinus } from '@fortawesome/free-solid-svg-icons';
 	import { Accordion } from '@skeletonlabs/skeleton';
 
 	onMount(async () => {
 		let m = await getMenuItems();
 		menuStore.set(m);
 
-		console.log("🚀 ~ onMount ~ menuStore:", $menuStore);
-
+		console.log('🚀 ~ onMount ~ menuStore:', $menuStore);
 	});
 
 	let hamburger = true;
+	const theme = writable('light');
+
+	// function to increase the current font size by 1 step
+	function increaseFontSize() {
+		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		document.documentElement.style.fontSize = currentFontSize + 1 + 'px';
+	}
+	// function to decrease the current font size by 1 step
+	function decreaseFontSize() {
+		const currentFontSize = parseFloat(getComputedStyle(document.documentElement).fontSize);
+		document.documentElement.style.fontSize = currentFontSize - 1 + 'px';
+	}
+
+	// function to toggle dark mode
+	function toggleDarkMode() {
+		if ($theme === 'dark') {
+			theme.set('light');
+			document.documentElement.classList.remove('dark');
+		} else {
+			theme.set('dark');
+			document.documentElement.classList.add('dark');
+		}
+	}
+
+	let showMode = false; // set to false to hide the dark mode toggle button
+	// only show dark mode button in dev mode
+	if (import.meta.env.DEV) {
+		showMode = true;
+	}
 </script>
 
 {#if $menuStore !== undefined}
@@ -55,8 +84,74 @@
 						<div class="grid w-full sm:flex gap-2 justify-auto sm:justify-end">
 							<MenuAccountBar menuBar={$menuStore.AccountBar} />
 							<MenuBar menuBar={$menuStore.LaunchBar} />
-							<SettingsBar menuBar={$menuStore.Settings} />
-							<!-- </div> -->
+							<!-- Add change font size buttons -->
+							<button
+								class="btn btn-ghost pl-1 pr-1"
+								on:click={decreaseFontSize}
+								title="Decrease font size"
+							>
+								<span class="capitalize text-lg whitespace-nowrap hover:text-secondary-500">A-</span>
+							</button>
+							<button
+								class="btn btn-ghost pl-1 pr-1"
+								on:click={increaseFontSize}
+								title="Increase font size"
+							>
+								<span class="capitalize text-lg whitespace-nowrap hover:text-secondary-500">A+</span>
+							</button>
+
+							<button
+								class="btn btn-ghost pl-1 pr-1"
+								on:click={toggleDarkMode}
+								title="Toggle dark mode"
+							>	
+								{#if showMode}
+									{#if $theme === 'dark'}
+										<!-- sun icon (white via currentColor) -->
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="18"
+											height="18"
+											viewBox="0 0 24 24"
+											fill="none"
+											aria-hidden="true"
+											focusable="false"
+											class="inline-block"
+										>
+											<g
+												stroke="currentColor"
+												stroke-width="1.6"
+												stroke-linecap="round"
+												stroke-linejoin="round"
+												fill="none"
+											>
+												<circle cx="12" cy="12" r="4" stroke="currentColor" fill="currentColor" />
+												<path
+													d="M12 2v2M12 20v2M4.93 4.93l1.41 1.41M17.66 17.66l1.41 1.41M2 12h2M20 12h2M4.93 19.07l1.41-1.41M17.66 6.34l1.41-1.41"
+													stroke="currentColor"
+												/>
+											</g>
+										</svg>
+									{:else}
+										<!-- moon icon (white via currentColor) -->
+										<svg
+											xmlns="http://www.w3.org/2000/svg"
+											width="18"
+											height="18"
+											viewBox="0 0 24 24"
+											fill="currentColor"
+											aria-hidden="true"
+											focusable="false"
+											class="inline-block"
+										>
+											<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z" fill="currentColor" />
+										</svg>
+									{/if}
+								{/if}
+							</button>
+								<SettingsBar menuBar={$menuStore.Settings} />
+								<!-- </div> -->
+							
 						</div>
 					</div>
 				</Accordion>

package/src/lib/components/page/menu/MenuSublist.svelte

@@ -79,7 +79,7 @@
 			value={item.Title}
 	
 		>
-		<a id={"menu-"+item.Title.replaceAll(' ', '-')}  href={item.Url} target="{item.Target}" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
+		<a id={"menu-"+item.Title.replaceAll(' ', '-')}  href={item.Url} target="{item.Target}" class="w-full block" on:click|preventDefault={()=>clickFn(item)}>{item.Title}</a>
 
 		</ListBoxItem>
 

package/src/lib/css/core.ui.postcss

@@ -1,7 +1,16 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+@tailwind variants;
+
 /*place global styles here */
 html,
 body {
-	@apply h-full;
+	@apply h-full bg-white text-sm leading-tight;
+}
+
+[type='text']:focus {
+	--tw-ring-color: #00000;
 }
 
 h1 {
@@ -12,11 +21,20 @@ h2 {
 	@apply text-primary-500;
 }
 
+input {
+	@apply pb-1 pt-1
+}
 
-:root {
-	--background: rgb(var(--color-surface-200));
+.svelte-select,
+.svelte-select-list {
+	@apply dark:!bg-zinc-700 border dark:!border-zinc-500;
 }
 
-[type='text']:focus {
-	--tw-ring-color: #00000;
+.multi-item {
+	@apply dark:!bg-zinc-500 dark:!outline-zinc-400;
 }
+
+.list-item .item.hover:not(.active):not(.list-group-title) {
+	@apply dark:!text-black;
+}
+

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

@@ -0,0 +1,100 @@
+[data-theme='bexis2theme'] {
+	/* =~= Theme Properties =~= */
+	--base-font-family: system-ui;
+	--base-font-color: var(--color-surface-900);
+	--base-font-color-dark: 255 255 255;
+	/*--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;*/
+	--radius-base: 4px;
+	--radius-container: 4px;
+	--default-border-width: 1px;
+	--default-divide-width: 1px;
+	--default-ring-width: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 255 255 255;
+	--on-secondary: 255 255 255;
+	--on-tertiary: 0 0 0;
+	--on-success: 255 255 255;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: #e3f3f1;
+	--color-primary-100: #daf0ec;
+	--color-primary-200: #d1ece8;
+	--color-primary-300: #b5e0d9;
+	--color-primary-400: #7dc9bd;
+	--color-primary-500: #45b2a1;
+	--color-primary-600: #3ea091;
+	--color-primary-700: #348679;
+	--color-primary-800: #296b61;
+	--color-primary-900: #22574f;
+	/* secondary | #ff9700 */
+	--color-secondary-50: #ffefd9;
+	--color-secondary-100: #ffeacc;
+	--color-secondary-200: #ffe5bf;
+	--color-secondary-300: #ffd599;
+	--color-secondary-400: #ffb64d;
+	--color-secondary-500: #ff9700;
+	--color-secondary-600: #e68800;
+	--color-secondary-700: #bf7100;
+	--color-secondary-800: #995b00;
+	--color-secondary-900: #7d4a00;
+	/* tertiary | #bee1da */
+	--color-tertiary-50: #f5fbf9;
+	--color-tertiary-100: #f2f9f8;
+	--color-tertiary-200: #eff8f6;
+	--color-tertiary-300: #e5f3f0;
+	--color-tertiary-400: #d2eae5;
+	--color-tertiary-500: #bee1da;
+	--color-tertiary-600: #abcbc4;
+	--color-tertiary-700: #8fa9a4;
+	--color-tertiary-800: #728783;
+	--color-tertiary-900: #5d6e6b;
+	/* success | #4BB543 */
+	--color-success-50: #e4f4e3;
+	--color-success-100: #dbf0d9;
+	--color-success-200: #d2edd0;
+	--color-success-300: #b7e1b4;
+	--color-success-400: #81cb7b;
+	--color-success-500: #4bb543;
+	--color-success-600: #44a33c;
+	--color-success-700: #388832;
+	--color-success-800: #2d6d28;
+	--color-success-900: #255921;
+	/* warning | #EAB308 */
+	--color-warning-50: #fcf4da;
+	--color-warning-100: #fbf0ce;
+	--color-warning-200: #faecc1;
+	--color-warning-300: #f7e19c;
+	--color-warning-400: #f0ca52;
+	--color-warning-500: #eab308;
+	--color-warning-600: #d3a107;
+	--color-warning-700: #b08606;
+	--color-warning-800: #8c6b05;
+	--color-warning-900: #735804;
+	/* error | #FF0000 */
+	--color-error-50: #ffd9d9;
+	--color-error-100: #ffcccc;
+	--color-error-200: #ffbfbf;
+	--color-error-300: #ff9999;
+	--color-error-400: #ff4d4d;
+	--color-error-500: #ff0000;
+	--color-error-600: #e60000;
+	--color-error-700: #bf0000;
+	--color-error-800: #990000;
+	--color-error-900: #7d0000;
+	/* surface | #c7c7c7 */
+	--color-surface-50: #f7f7f7;
+	--color-surface-100: #f4f4f4;
+	--color-surface-200: #f1f1f1;
+	--color-surface-300: #e9e9e9;
+	--color-surface-400: #d8d8d8;
+	--color-surface-500: #c7c7c7;
+	--color-surface-600: #b3b3b3;
+	--color-surface-700: #959595;
+	--color-surface-800: #777777;
+	--color-surface-900: #626262;
+}