@bexis2/bexis2-core-ui 0.4.94 → 0.4.95

package/README.md

@@ -1,4 +1,9 @@
 # bexis-core-ui
+## 0.4.95
+- Input
+  - Add focus in/out for element
+  - format date picker
+
 
 ## 0.4.94
 - Input

package/dist/components/form/DatePickerInput.svelte

@@ -1,4 +1,6 @@
-<script>import InputContainer from "./InputContainer.svelte";
+<script>import Fa from "svelte-fa";
+import { faCalendar, faClock } from "@fortawesome/free-solid-svg-icons";
+import InputContainer from "./InputContainer.svelte";
 import SveltyPicker from "svelty-picker";
 export let id = "";
 export let label = "";
@@ -17,8 +19,6 @@ export let mode = "date";
 export let initialDate = "";
 export let format = "yyyy-mm-dd";
 export let displayFormat = "yyyy-mm-dd";
-export let onChangeHandler = () => {
-};
 let width = "w-32";
 if (mode !== "date" && mode !== "time" && mode !== "datetime") {
   throw new Error(`Invalid mode: ${mode}. Valid modes are 'date', 'time', and 'datetime'.`);
@@ -34,16 +34,32 @@ if (mode === "datetime") {
 </script>
 
 <InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
-	<SveltyPicker
-		{mode}
-		name={label}
-		{format}
-		{displayFormat}
-		{initialDate}
-		bind:value
-		inputClasses="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400 {width}"
-		on:change={onChangeHandler}
-		{disabled}
-		{placeholder}
-	/>
+<!-- 1. Wrap everything in a relative container so the icon positions against this boundary -->
+<div class="relative w-full">
+    
+    <SveltyPicker
+        {mode}
+        name={label}
+        {format}
+        {displayFormat}
+        {initialDate}
+        bind:value
+        on:input
+        on:change
+        {disabled}
+        {placeholder}
+        manualInput={true}
+        
+        inputClasses="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400 pr-10 {valid ? 'input-success' : ''} {invalid ? 'input-error' : ''}"
+    />
+	{#if mode === 'time'}
+		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+	{:else if mode === 'date' }
+		<Fa icon={faCalendar} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+	{:else if mode === 'datetime'}
+		<Fa icon={faCalendar} class="absolute inset-y-2 right-5 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+	{/if}
+</div>
+	
 </InputContainer>

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

@@ -18,11 +18,12 @@ declare const __propDef: {
         initialDate?: string;
         format?: string;
         displayFormat?: string;
-        onChangeHandler?: (event: CustomEvent) => void;
     };
     events: {
         showDescription: CustomEvent<any>;
         hideDescription: CustomEvent<any>;
+        input: CustomEvent<any>;
+        change: CustomEvent<any>;
     } & {
         [evt: string]: CustomEvent<any>;
     };

package/dist/components/form/InputContainer.svelte

@@ -11,7 +11,7 @@ export let description = "";
 export let showDescription = false;
 export let showIcon = false;
 const dispatch = createEventDispatcher();
-function onMouseOver() {
+export function onMouseOver() {
   if (help) {
     helpStore.show(id);
   }
@@ -19,7 +19,7 @@ function onMouseOver() {
     dispatch("showDescription", { id, description });
   }
 }
-function onMouseOut() {
+export function onMouseOut() {
   if (help) {
     helpStore.hide(id);
   }
@@ -36,6 +36,9 @@ function onMouseOut() {
 	on:focus={onMouseOver}
 	on:mouseout={onMouseOut}
 	on:blur={onMouseOut}
+	on:focusin={onMouseOver}  
+    on:focusout={onMouseOut}
+
 >
 	<label class="label w-full flex" for="{id}">
 		<span class="grow"

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

@@ -9,6 +9,8 @@ declare const __propDef: {
         description?: string;
         showDescription?: boolean;
         showIcon?: boolean;
+        onMouseOver?: () => void;
+        onMouseOut?: () => void;
     };
     events: {
         showDescription: CustomEvent<any>;
@@ -26,5 +28,7 @@ export type InputContainerProps = typeof __propDef.props;
 export type InputContainerEvents = typeof __propDef.events;
 export type InputContainerSlots = typeof __propDef.slots;
 export default class InputContainer extends SvelteComponent<InputContainerProps, InputContainerEvents, InputContainerSlots> {
+    get onMouseOver(): () => void;
+    get onMouseOut(): () => void;
 }
 export {};

package/dist/index.d.ts

@@ -32,7 +32,7 @@ export { Checkbox, CheckboxKVPList, CheckboxList, DateInput, DatePickerInput, Dr
 export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.js';
+export { host, username, password, errorStore, setApiConfig } from './stores/apiStores.js';
 export type { userType, inputType, fileUploaderType, linkType, listItemType, keyValuePairType, fileInfoType, fileReaderInfoType, asciiFileReaderInfoType } from './models/Models.js';
 export { helpStore } from './stores/pageStores';
 export type { helpStoreType, helpItemType } from './models/Models';

package/dist/index.js

@@ -45,7 +45,7 @@ export { FileInfo, FileIcon, FileUploader };
 export { Spinner, Page, Alert, Menu, ErrorMessage };
 //Api
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.js';
+export { host, username, password, errorStore, setApiConfig } from './stores/apiStores.js';
 //help
 export { helpStore } from './stores/pageStores';
 //notification

package/dist/services/Api.js

@@ -27,7 +27,7 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
         return Promise.resolve(res);
     })
         .catch((er) => {
-        //console.log("🚀 ~ apiRequest ~ err:", er)
+        console.log("🚀 ~ apiRequest ~ err:", er);
         const err = er.response;
         let error = {
             status: err.status,
@@ -36,7 +36,8 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
             stackTrace: err.data.stackTrace,
         };
         errorStore.set(error);
-        return Promise.reject(err);
+        console.log("🚀 ~ apiRequest ~ error:", error);
+        return Promise.reject(new Error(error.error));
     });
 };
 // function to execute the http get request

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.4.94",
+  "version": "0.4.95",
   "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/DatePickerInput.svelte

@@ -1,4 +1,6 @@
 <script lang="ts">
+	import Fa from 'svelte-fa';
+	import { faCalendar, faClock } from '@fortawesome/free-solid-svg-icons';
 	import InputContainer from './InputContainer.svelte';
 	import SveltyPicker from 'svelty-picker';
 
@@ -19,7 +21,6 @@
 	export let initialDate: string = '';
 	export let format: string = 'yyyy-mm-dd';
 	export let displayFormat: string = 'yyyy-mm-dd';
-	export let onChangeHandler: (event: CustomEvent) => void = () => {};
 
 	let width = 'w-32';
 
@@ -39,16 +40,32 @@
 </script>
 
 <InputContainer {id} {label} {feedback} {required} {help} {description} {showDescription} {showIcon} on:showDescription on:hideDescription>
-	<SveltyPicker
-		{mode}
-		name={label}
-		{format}
-		{displayFormat}
-		{initialDate}
-		bind:value
-		inputClasses="input variant-form-material dark:bg-zinc-700 bg-zinc-50 placeholder:text-gray-400 {width}"
-		on:change={onChangeHandler}
-		{disabled}
-		{placeholder}
-	/>
+<!-- 1. Wrap everything in a relative container so the icon positions against this boundary -->
+<div class="relative w-full">
+    
+    <SveltyPicker
+        {mode}
+        name={label}
+        {format}
+        {displayFormat}
+        {initialDate}
+        bind:value
+        on:input
+        on:change
+        {disabled}
+        {placeholder}
+        manualInput={true}
+        
+        inputClasses="input variant-form-material bg-zinc-50 dark:bg-zinc-700 placeholder:text-gray-400 pr-10 {valid ? 'input-success' : ''} {invalid ? 'input-error' : ''}"
+    />
+	{#if mode === 'time'}
+		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+	{:else if mode === 'date' }
+		<Fa icon={faCalendar} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+	{:else if mode === 'datetime'}
+		<Fa icon={faCalendar} class="absolute inset-y-2 right-5 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+		<Fa icon={faClock} class="absolute inset-y-2 right-0 flex items-center pr-3 pointer-events-none text-gray-400 dark:text-gray-300" />
+	{/if}
+</div>
+	
 </InputContainer>

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

@@ -15,7 +15,7 @@
 
 	const dispatch = createEventDispatcher();
 
-	function onMouseOver() {
+	export function onMouseOver() {
 		if (help) {
 			helpStore.show(id);
 		}
@@ -26,7 +26,7 @@
 
 	}
 
-	function onMouseOut() {
+	export function onMouseOut() {
 		if (help) {
 			helpStore.hide(id);
 		}
@@ -44,6 +44,9 @@
 	on:focus={onMouseOver}
 	on:mouseout={onMouseOut}
 	on:blur={onMouseOut}
+	on:focusin={onMouseOver}  
+    on:focusout={onMouseOut}
+
 >
 	<label class="label w-full flex" for="{id}">
 		<span class="grow"

package/src/lib/index.ts

@@ -75,7 +75,7 @@ export { Spinner, Page, Alert, Menu, ErrorMessage };
 
 //Api
 export { Api } from './services/Api.js';
-export { host, username, password, setApiConfig } from './stores/apiStores.js';
+export { host, username, password,errorStore, setApiConfig } from './stores/apiStores.js';
 
 //Type
 export type {

package/src/lib/services/Api.ts

@@ -21,6 +21,7 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
 
 
 	//using the axios instance to perform the request that received from each http method
+
 	return axiosAPI({
 		method,
 		url,
@@ -35,9 +36,11 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
 
 		})
 		.catch((er) => {
-		//console.log("🚀 ~ apiRequest ~ err:", er)
+		console.log("🚀 ~ apiRequest ~ err:", er)
 			const err = er.response;
 			
+   
+
 			let error:errorType = {
 							status: err.status,
 							statusText: err.statusText,
@@ -46,8 +49,9 @@ const apiRequest = (method, url, request, customHeaders = {}, customConfig = {})
 			}
 
 			errorStore.set(error);
-
-			return Promise.reject(err);
+			console.log("🚀 ~ apiRequest ~ error:", error)
+			
+			return Promise.reject(new Error(error.error));
 		});
 };