@bexis2/bexis2-core-ui 0.0.2 → 0.0.4

package/.eslintignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

package/.eslintrc.cjs

@@ -0,0 +1,20 @@
+module.exports = {
+	root: true,
+	parser: '@typescript-eslint/parser',
+	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
+	plugins: ['svelte3', '@typescript-eslint'],
+	ignorePatterns: ['*.cjs'],
+	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
+	settings: {
+		'svelte3/typescript': () => require('typescript')
+	},
+	parserOptions: {
+		sourceType: 'module',
+		ecmaVersion: 2020
+	},
+	env: {
+		browser: true,
+		es2017: true,
+		node: true
+	}
+};

package/.prettierignore

@@ -0,0 +1,13 @@
+.DS_Store
+node_modules
+/build
+/.svelte-kit
+/package
+.env
+.env.*
+!.env.example
+
+# Ignore files for PNPM, NPM and YARN
+pnpm-lock.yaml
+package-lock.json
+yarn.lock

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+	"useTabs": true,
+	"singleQuote": true,
+	"trailingComma": "none",
+	"printWidth": 100,
+	"plugins": ["prettier-plugin-svelte"],
+	"pluginSearchDirs": ["."],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

package/.vscode/settings.json

@@ -0,0 +1,99 @@
+{
+	"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/{TableView.svelte.d.ts → dist/TableView.svelte.d.ts}

@@ -1,23 +1,23 @@
-/** @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 {};
+/** @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/{components → dist/components}/File/FileIcon.svelte.d.ts

@@ -1,23 +1,23 @@
-/** @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 {};
+/** @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/{components → dist/components}/File/FileInfo.svelte.d.ts

@@ -1,27 +1,27 @@
-/** @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 {};
+/** @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

@@ -0,0 +1,217 @@
+<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/{components → dist/components}/File/FileUploader.svelte.d.ts

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

@@ -1,14 +1,14 @@
-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 {};
+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

@@ -0,0 +1,8 @@
+<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>

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

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

package/dist/css/core.ui.postcss

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

package/{index.d.ts → dist/index.d.ts}

@@ -1,9 +1,9 @@
-import ListView from './components/ListView.svelte';
-import TableView from './TableView.svelte';
-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';
+import ListView from './components/ListView.svelte';
+import TableView from './TableView.svelte';
+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';