@bexis2/bexis2-core-ui 0.0.4 → 0.0.6

package/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "private": false,
   "scripts": {
     "dev": "vite dev",
-    "package": "svelte-package `./package/`",
+    "package": "svelte-package",
     "build": "vite build sync --watch",
     "preview": "vite preview",
     "test": "playwright test",
@@ -74,8 +74,11 @@
   ],
   "exports": {
     ".": {
-      "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
-    }
+      "types": "./export/index.d.ts",
+      "svelte": "./export/index.js"
+    },
+    "files": [
+      "dist"
+    ]
   }
 }

package/src/lib/css/coreui.postcss

@@ -0,0 +1,2 @@
+/*place global styles here */
+html, body { @apply h-full overflow-hidden; }

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

@@ -0,0 +1,98 @@
+:root {
+	/* =~= Theme Properties =~= */
+	--theme-font-family-base: system-ui;
+	--theme-font-family-heading: system-ui;
+	--theme-font-color-base: 0 0 0;
+	--theme-font-color-dark: 255 255 255;
+	--theme-rounded-base: 4px;
+	--theme-rounded-container: 4px;
+	--theme-border-base: 1px;
+	/* =~= Theme On-X Colors =~= */
+	--on-primary: 0 0 0;
+	--on-secondary: 0 0 0;
+	--on-tertiary: 0 0 0;
+	--on-success: 0 0 0;
+	--on-warning: 255 255 255;
+	--on-error: 255 255 255;
+	--on-surface: 0 0 0;
+	/* =~= Theme Colors  =~= */
+	/* primary | #45b2a1 */
+	--color-primary-50: 227 243 241; /* ⬅ #e3f3f1 */
+	--color-primary-100: 218 240 236; /* ⬅ #daf0ec */
+	--color-primary-200: 209 236 232; /* ⬅ #d1ece8 */
+	--color-primary-300: 181 224 217; /* ⬅ #b5e0d9 */
+	--color-primary-400: 125 201 189; /* ⬅ #7dc9bd */
+	--color-primary-500: 69 178 161; /* ⬅ #45b2a1 */
+	--color-primary-600: 62 160 145; /* ⬅ #3ea091 */
+	--color-primary-700: 52 134 121; /* ⬅ #348679 */
+	--color-primary-800: 41 107 97; /* ⬅ #296b61 */
+	--color-primary-900: 34 87 79; /* ⬅ #22574f */
+	/* secondary | #ff9700 */
+	--color-secondary-50: 255 239 217; /* ⬅ #ffefd9 */
+	--color-secondary-100: 255 234 204; /* ⬅ #ffeacc */
+	--color-secondary-200: 255 229 191; /* ⬅ #ffe5bf */
+	--color-secondary-300: 255 213 153; /* ⬅ #ffd599 */
+	--color-secondary-400: 255 182 77; /* ⬅ #ffb64d */
+	--color-secondary-500: 255 151 0; /* ⬅ #ff9700 */
+	--color-secondary-600: 230 136 0; /* ⬅ #e68800 */
+	--color-secondary-700: 191 113 0; /* ⬅ #bf7100 */
+	--color-secondary-800: 153 91 0; /* ⬅ #995b00 */
+	--color-secondary-900: 125 74 0; /* ⬅ #7d4a00 */
+	/* tertiary | #bee1da */
+	--color-tertiary-50: 245 251 249; /* ⬅ #f5fbf9 */
+	--color-tertiary-100: 242 249 248; /* ⬅ #f2f9f8 */
+	--color-tertiary-200: 239 248 246; /* ⬅ #eff8f6 */
+	--color-tertiary-300: 229 243 240; /* ⬅ #e5f3f0 */
+	--color-tertiary-400: 210 234 229; /* ⬅ #d2eae5 */
+	--color-tertiary-500: 190 225 218; /* ⬅ #bee1da */
+	--color-tertiary-600: 171 203 196; /* ⬅ #abcbc4 */
+	--color-tertiary-700: 143 169 164; /* ⬅ #8fa9a4 */
+	--color-tertiary-800: 114 135 131; /* ⬅ #728783 */
+	--color-tertiary-900: 93 110 107; /* ⬅ #5d6e6b */
+	/* success | #4BB543 */
+	--color-success-50: 228 244 227; /* ⬅ #e4f4e3 */
+	--color-success-100: 219 240 217; /* ⬅ #dbf0d9 */
+	--color-success-200: 210 237 208; /* ⬅ #d2edd0 */
+	--color-success-300: 183 225 180; /* ⬅ #b7e1b4 */
+	--color-success-400: 129 203 123; /* ⬅ #81cb7b */
+	--color-success-500: 75 181 67; /* ⬅ #4BB543 */
+	--color-success-600: 68 163 60; /* ⬅ #44a33c */
+	--color-success-700: 56 136 50; /* ⬅ #388832 */
+	--color-success-800: 45 109 40; /* ⬅ #2d6d28 */
+	--color-success-900: 37 89 33; /* ⬅ #255921 */
+	/* warning | #ef4444 */
+	--color-warning-50: 253 227 227; /* ⬅ #fde3e3 */
+	--color-warning-100: 252 218 218; /* ⬅ #fcdada */
+	--color-warning-200: 251 208 208; /* ⬅ #fbd0d0 */
+	--color-warning-300: 249 180 180; /* ⬅ #f9b4b4 */
+	--color-warning-400: 244 124 124; /* ⬅ #f47c7c */
+	--color-warning-500: 239 68 68; /* ⬅ #ef4444 */
+	--color-warning-600: 215 61 61; /* ⬅ #d73d3d */
+	--color-warning-700: 179 51 51; /* ⬅ #b33333 */
+	--color-warning-800: 143 41 41; /* ⬅ #8f2929 */
+	--color-warning-900: 117 33 33; /* ⬅ #752121 */
+	/* error | #FF0000 */
+	--color-error-50: 255 217 217; /* ⬅ #ffd9d9 */
+	--color-error-100: 255 204 204; /* ⬅ #ffcccc */
+	--color-error-200: 255 191 191; /* ⬅ #ffbfbf */
+	--color-error-300: 255 153 153; /* ⬅ #ff9999 */
+	--color-error-400: 255 77 77; /* ⬅ #ff4d4d */
+	--color-error-500: 255 0 0; /* ⬅ #FF0000 */
+	--color-error-600: 230 0 0; /* ⬅ #e60000 */
+	--color-error-700: 191 0 0; /* ⬅ #bf0000 */
+	--color-error-800: 153 0 0; /* ⬅ #990000 */
+	--color-error-900: 125 0 0; /* ⬅ #7d0000 */
+	/* surface | #FFFFFF */
+	--color-surface-50: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-100: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-200: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-300: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-400: 255 255 255; /* ⬅ #ffffff */
+	--color-surface-500: 255 255 255; /* ⬅ #FFFFFF */
+	--color-surface-600: 230 230 230; /* ⬅ #e6e6e6 */
+	--color-surface-700: 191 191 191; /* ⬅ #bfbfbf */
+    /* dark mode surface | #1f2937 */
+	--color-surface-800: 19 25 33; /* ⬅ #131921 */
+	--color-surface-900: 15 20 27; /* ⬅ #0f141b */
+	
+}

package/src/lib/index.ts

@@ -7,13 +7,9 @@ import FileIcon from './components/File/FileIcon.svelte'
 import FileInfo from './components/File/FileInfo.svelte'
 import FileUploader from './components/File/FileUploader.svelte'
 
-
-
 export {ListView,TableView, FileInfo, FileIcon, FileUploader }
 
-
 export {Api} from './services/Api.js'
 export {host,username,password,setApiConfig} from './stores/apistore.js'
 
 export type {user, FileUploaderModel} from './models/Models.js'
-

package/.vscode/settings.json

@@ -1,99 +0,0 @@
-{
-	"prettier.documentSelectors": [
-		"**/*.svelte"
-	],
-	"tailwindCSS.classAttributes": [
-		"class",
-		"accent",
-		"active",
-		"background",
-		"badge",
-		"bgBackdrop",
-		"bgDark",
-		"bgDrawer",
-		"bgLight",
-		"blur",
-		"border",
-		"button",
-		"buttonAction",
-		"buttonBack",
-		"buttonClasses",
-		"buttonComplete",
-		"buttonDismiss",
-		"buttonNeutral",
-		"buttonNext",
-		"buttonPositive",
-		"buttonTextCancel",
-		"buttonTextConfirm",
-		"buttonTextNext",
-		"buttonTextPrevious",
-		"buttonTextSubmit",
-		"caretClosed",
-		"caretOpen",
-		"chips",
-		"color",
-		"cursor",
-		"display",
-		"element",
-		"fill",
-		"fillDark",
-		"fillLight",
-		"flex",
-		"gap",
-		"gridColumns",
-		"height",
-		"hover",
-		"invalid",
-		"justify",
-		"meter",
-		"padding",
-		"position",
-		"regionBackdrop",
-		"regionBody",
-		"regionCaption",
-		"regionCaret",
-		"regionCell",
-		"regionCone",
-		"regionContent",
-		"regionControl",
-		"regionDefault",
-		"regionDrawer",
-		"regionFoot",
-		"regionFooter",
-		"regionHead",
-		"regionHeader",
-		"regionIcon",
-		"regionInterface",
-		"regionInterfaceText",
-		"regionLabel",
-		"regionLead",
-		"regionLegend",
-		"regionList",
-		"regionNavigation",
-		"regionPage",
-		"regionPanel",
-		"regionRowHeadline",
-		"regionRowMain",
-		"regionTrail",
-		"ring",
-		"rounded",
-		"select",
-		"shadow",
-		"slotDefault",
-		"slotFooter",
-		"slotHeader",
-		"slotLead",
-		"slotMessage",
-		"slotMeta",
-		"slotPageContent",
-		"slotPageFooter",
-		"slotPageHeader",
-		"slotSidebarLeft",
-		"slotSidebarRight",
-		"slotTrail",
-		"spacing",
-		"text",
-		"track",
-		"width"
-	]
-}

package/dist/TableView.svelte

@@ -1 +0,0 @@
-<h1>table</h1>

package/dist/TableView.svelte.d.ts

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  TableViewProps */
-/** @typedef {typeof __propDef.events}  TableViewEvents */
-/** @typedef {typeof __propDef.slots}  TableViewSlots */
-export default class TableView extends SvelteComponentTyped<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type TableViewProps = typeof __propDef.props;
-export type TableViewEvents = typeof __propDef.events;
-export type TableViewSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        [x: string]: never;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/components/File/FileIcon.svelte

@@ -1,49 +0,0 @@
-<script>
-
-import Fa from 'svelte-fa'
-import { faFileAudio } from '@fortawesome/free-regular-svg-icons'
-import { faFileVideo } from '@fortawesome/free-regular-svg-icons'
-import { faFileWord } from '@fortawesome/free-regular-svg-icons'
-import { faFilePdf } from '@fortawesome/free-regular-svg-icons'
-import { faFileExcel } from '@fortawesome/free-regular-svg-icons'
-import { faFileAlt } from '@fortawesome/free-regular-svg-icons'
-import { faFileImage } from '@fortawesome/free-regular-svg-icons'
-import { faFileArchive } from '@fortawesome/free-regular-svg-icons'
-
- export let type = "";
- 
-</script>
-
-{#if type.includes("excel") || type.includes("spreadsheetml")}
-  <Fa icon={faFileExcel} />
-{/if}
-
-{#if type.includes("text")}
-  <Fa icon={faFileAlt} />
-{/if}
-
-{#if type.includes("image")}
-  <Fa icon={faFileImage} />
-{/if}
-
-{#if type.includes("audio")}
-  <Fa icon={faFileAudio} />
-{/if}
-
-{#if type.includes("video")}
-  <Fa icon={faFileVideo} />
-{/if}
-
-{#if type.includes("word")}
-  <Fa icon={faFileWord} />
-{/if}
-
-{#if type.includes("pdf")}
-  <Fa icon={faFilePdf} />
-{/if}
-
-{#if type.includes("zip")}
-  <Fa icon={faFileArchive} />
-{/if}
-
-

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

@@ -1,23 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileIconProps */
-/** @typedef {typeof __propDef.events}  FileIconEvents */
-/** @typedef {typeof __propDef.slots}  FileIconSlots */
-export default class FileIcon extends SvelteComponentTyped<{
-    type?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileIconProps = typeof __propDef.props;
-export type FileIconEvents = typeof __propDef.events;
-export type FileIconSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/components/File/FileInfo.svelte

@@ -1,14 +0,0 @@
-<script>
-
-import FileIcon from './FileIcon.svelte';
-
-export let name="";
-export let type = "";
-// export let description;
-export let size = "";
-
-</script>
-
-<div style="font-size:{size}">
- <FileIcon {type} /> {name}
-</div>

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

@@ -1,27 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileInfoProps */
-/** @typedef {typeof __propDef.events}  FileInfoEvents */
-/** @typedef {typeof __propDef.slots}  FileInfoSlots */
-export default class FileInfo extends SvelteComponentTyped<{
-    type?: string | undefined;
-    name?: string | undefined;
-    size?: string | undefined;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileInfoProps = typeof __propDef.props;
-export type FileInfoEvents = typeof __propDef.events;
-export type FileInfoSlots = typeof __propDef.slots;
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        type?: string | undefined;
-        name?: string | undefined;
-        size?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/components/File/FileUploader.svelte

@@ -1,217 +0,0 @@
-<script>
-
-import type { FileUploaderModel, FileInfo, Files} from '../../models/Models.js'
-
-
-import DropZone from "svelte-file-dropzone/Dropzone.svelte";
-import {Fa} from 'svelte-fa'
-
-import Spinner from '../Spinner/Spinner.svelte';
-import { createEventDispatcher } from 'svelte';
-import { faTrash } from '@fortawesome/free-solid-svg-icons'
-import { faSave } from '@fortawesome/free-regular-svg-icons'
-import { faFileUpload } from '@fortawesome/free-solid-svg-icons'
-
-import { Api } from '../../services/Api.js'
-
-export let id=0;
-export let version=1;
-
-import { onMount } from 'svelte'
-
-// export let description="";
-// export let status=0;
-
-
-//action to load fileupload model
-export let start="";
-//action to save selected file 
-export let submit="";
-
-export let context="";
-
-export let data:FileUploaderModel | undefined;
-
-$:model= data;
-$:submitBt ="submit";
-
-let maxSize=0;
-
-const dispatch = createEventDispatcher();
-
-let fx:FileInfo[]
-
-let files:Files = {accepted:[], rejected:[]};
-$:files;
-
-onMount(async () => {
-
-  console.log("fileupload - OnMount", data);
-
-
-  if(!data)
-  {
-    load();
-  }
-  else
-  {
-    model = data;  
-  }
-
-  if(model)
-  {
-    submitBt += context;   
-    maxSize = (model.maxSize*1024)*1024
-  }
-
-})
-
-// load modal from server 
-async function load()
-{
-  let url = start+"?id="+id+"&version="+version;
-  
-  // load menu froms server
-  const res = await Api.get(url);
-  model = await res.json();
-
-  console.log("fileupload",model);
-  
-
-}
-
-function handleFilesSelect(e:any) {
-
-  console.log("handleFilesSelect", e);
-  console.log("files", files);
-
-
-  const { acceptedFiles, fileRejections } = e.detail;
-
- 
-  files.accepted = [...files.accepted, ...acceptedFiles];
-  files.rejected = [...files.rejected, ...fileRejections];
-
-
-  console.log("acceptedFiles", acceptedFiles);
-  console.log("files.accepted", files.accepted);
-
-
-  if(fileRejections.length>0)
-  {
-    //alert("the dropped file is not supported");
-    console.log("the dropped file is not supported.");
-    console.log(files.rejected);
-
-    let messages = [""];
-    
-    for (let index = 0; index < fileRejections.length; index++) {
-      const element = fileRejections[index];
-      messages.push(getErrorMessage(element))
-    }
-
-    console.log(messages);
-    
-    dispatch("error", {messages})
-    //list up the errors somewhere
-    files.rejected = []
-  }
-
-  if(acceptedFiles.length>0)
-  {
-      document.getElementById(submitBt)?.click(); 
-  }
-
-}
-
-function getErrorMessage(rejected)
-{
-  let message = "";
-  message = rejected.file.path+" : ";
-  let errors = rejected.errors;
-  for (let index = 0; index < errors.length; index++) {
-    const error = errors[index];
-    message+=error.message
-  }
-
-  return message;
-}
-
-async function handleSubmit() {
-
-    console.log("SUBMIT");
-
-    dispatch('submit')
-
-    let url = submit+"?id="+id;
-
-    // console.log(model);
-    // console.log(url);
-    console.log("SUBMIT");
-
-    if (files.accepted.length > 0) {
-
-      console.log(files);
-
-      const formData = new FormData();
-      formData.append("files","123"); 
-      // Looping over all files and add it to FormData object  
-      for (var i = 0; i < files.accepted.length; i++) {  
-           
- 
-          formData.append(files.accepted[i].name, files.accepted[i]);  
-      }  
-      
-
-      const response = await Api.post(url, formData);
-
-      if(response.status==200)
-      {
-        dispatch('submited');
-
-        let message = files.accepted.length +" is/are uploaded";
-        dispatch('success', {text:message})
-
-        files.accepted = [];
-
-      }
-    }
-  }
-
-</script>
-
-<form on:submit|preventDefault={handleSubmit}>
-    {#if model}
-      <!--if model exist  -->
-      <div>
-
-        <DropZone 
-          on:drop={handleFilesSelect} 
-          accept={model.accept}
-          multiple={model.multiple}
-          {maxSize}>
-
-          <b style="font-size:xx-large"><Fa icon={faFileUpload}/></b>
-          <span><b>Drag 'n' drop some files here, or click to select files</b>
-          <b>max file : {model.maxSize} mb</b></span>
-          <p>
-            {#if model.accept}
-              {#each model.accept as ext}
-              {ext} ,   
-              {/each}
-            {/if}
-          </p>
-        </DropZone>
-
-      </div>
-
-      <button id="{submitBt}" color="primary" style="display:none" ><Fa icon={faSave}/></button>
-
-    {:else} <!-- while data is not loaded show a loading information -->
-
-      <Spinner/>
-    {/if}
-
-</form> 
-
-

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

@@ -1,44 +0,0 @@
-/** @typedef {typeof __propDef.props}  FileUploaderProps */
-/** @typedef {typeof __propDef.events}  FileUploaderEvents */
-/** @typedef {typeof __propDef.slots}  FileUploaderSlots */
-export default class FileUploader extends SvelteComponentTyped<{
-    data: FileUploaderModel | undefined;
-    submit?: string | undefined;
-    id?: number | undefined;
-    version?: number | undefined;
-    start?: string | undefined;
-    context?: string | undefined;
-}, {
-    error: CustomEvent<any>;
-    submit: CustomEvent<any>;
-    submited: CustomEvent<any>;
-    success: CustomEvent<any>;
-} & {
-    [evt: string]: CustomEvent<any>;
-}, {}> {
-}
-export type FileUploaderProps = typeof __propDef.props;
-export type FileUploaderEvents = typeof __propDef.events;
-export type FileUploaderSlots = typeof __propDef.slots;
-import { FileUploaderModel } from '../../models/Models.js';
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: {
-        data: FileUploaderModel | undefined;
-        submit?: string | undefined;
-        id?: number | undefined;
-        version?: number | undefined;
-        start?: string | undefined;
-        context?: string | undefined;
-    };
-    events: {
-        error: CustomEvent<any>;
-        submit: CustomEvent<any>;
-        submited: CustomEvent<any>;
-        success: CustomEvent<any>;
-    } & {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export {};

package/dist/components/ListView.svelte

@@ -1,6 +0,0 @@
-<script>let result = { name: "david" };
-</script>
- 
-<h1>MyList</h1>
-{result.name}
-<b>from bexis-lib</b>

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

@@ -1,14 +0,0 @@
-import { SvelteComponentTyped } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ListViewProps = typeof __propDef.props;
-export type ListViewEvents = typeof __propDef.events;
-export type ListViewSlots = typeof __propDef.slots;
-export default class ListView extends SvelteComponentTyped<ListViewProps, ListViewEvents, ListViewSlots> {
-}
-export {};

package/dist/components/Spinner/Spinner.svelte

@@ -1,8 +0,0 @@
-<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]"
-  role="status">
-  <span
-    class="!absolute !-m-px !h-px !w-px !overflow-hidden !whitespace-nowrap !border-0 !p-0 ![clip:rect(0,0,0,0)]"
-    >Loading...</span
-  >
-</div>