@bexis2/bexis2-core-ui 0.0.3 → 0.0.5

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

@@ -0,0 +1,19 @@
+
+// Reexport your entry components here
+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'
+

package/src/lib/models/Models.ts

@@ -0,0 +1,39 @@
+
+export interface FileInfo {
+ name:string,
+ type:string,
+ lenght:number,
+ description:string,
+ validationHash:string,
+
+}
+
+
+export interface FileUploaderModel{
+ accept:string[],
+ existingFiles:FileInfo[],
+ descriptionType:number,
+ multiple:boolean,
+ maxSize:number,
+ lastModification:Date
+}
+
+export interface Files {
+ accepted:Blob[],
+ rejected:Blob[]
+}
+
+
+export type user = {
+ name:string
+}
+
+export interface FileObj{
+ path:string,
+ lastModified:number,
+ lastModifiedDate:Date,
+ name:string,
+ size:number,
+ type:string,
+ webkitRelativePath:string
+}

package/{services/Api.js → src/lib/services/Api.ts}

@@ -1,44 +1,58 @@
 // Api.js
 import axios from "axios";
 import { host, username, password } from "../stores/apistore";
-console.log("setup axios");
+
+console.log("setup axios")
+
+
 // implement a method to execute all the request from here.
 const apiRequest = (method, url, request) => {
+ 
+   
     // Create a instance of axios to use the same base url.
     const axiosAPI = axios.create({
-        baseURL: host
+      baseURL : host
     });
+    
     const headers = {
         authorization: 'Basic ' + btoa(username + ":" + password)
     };
+    
     //using the axios instance to perform the request that received from each http method
     return axiosAPI({
         method,
         url,
         data: request,
         headers
-    }).then(res => {
+      }).then(res => {
+
         return Promise.resolve(res);
-    })
-        .catch(err => {
+      })
+      .catch(err => {
         return Promise.reject(err);
-    });
+      });
 };
+
 // function to execute the http get request
-const get = (url, request = "") => apiRequest("get", url, request);
+const get = (url, request="") => apiRequest("get",url,request);
+
 // function to execute the http delete request
-const deleteRequest = (url, request) => apiRequest("delete", url, request);
+const deleteRequest = (url, request) =>  apiRequest("delete", url, request);
+
 // function to execute the http post request
 const post = (url, request) => apiRequest("post", url, request);
+
 // function to execute the http put request
 const put = (url, request) => apiRequest("put", url, request);
+
 // function to execute the http path request
-const patch = (url, request) => apiRequest("patch", url, request);
+const patch = (url, request) =>  apiRequest("patch", url, request);
+
 // expose your method to other services or actions
-export const Api = {
+export const Api ={
     get,
     delete: deleteRequest,
     post,
     put,
     patch
-};
+};

package/src/lib/stores/apistore.ts

@@ -0,0 +1,32 @@
+import { writable } from 'svelte/store'
+
+
+export let host = "window.location.origin";
+export let username = "";
+export let password = "";
+
+const hostStore = writable(""); //writable(window.location.origin);
+const usernameStore =  writable("");
+const passwordStore = writable("");
+
+hostStore.subscribe(value => {
+ host = value;
+});
+
+usernameStore.subscribe(value => {
+ username = value;
+});
+
+passwordStore.subscribe(value => {
+ password = value;
+});
+
+
+
+export function setApiConfig(_host:string ,_user:string,_pw:string)
+{
+ console.log("overwrite settings");
+ hostStore.update(h=>h = _host);
+ usernameStore.update(u=>u = _user);
+ passwordStore.update(p=>p = _pw);
+}

package/src/routes/+layout.svelte

@@ -0,0 +1,10 @@
+<script lang='ts'>
+	// The ordering of these imports is critical to your app working properly
+	import '@skeletonlabs/skeleton/themes/theme-skeleton.css';
+	// If you have source.organizeImports set to true in VSCode, then it will auto change this ordering
+	import '@skeletonlabs/skeleton/styles/all.css';
+	// Most of your app wide CSS should be put in this file
+	import '../app.postcss';
+</script>
+
+<slot />

package/svelte.config.js

@@ -0,0 +1,18 @@
+import adapter from '@sveltejs/adapter-auto';
+import { vitePreprocess } from '@sveltejs/kit/vite';
+
+/** @type {import('@sveltejs/kit').Config} */
+const config = {
+	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
+	// for more information about preprocessors
+	preprocess: vitePreprocess(),
+
+	kit: {
+		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
+		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
+		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
+		adapter: adapter()
+	}
+};
+
+export default config;

package/tailwind.config.cjs

@@ -0,0 +1,9 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+	darkMode: 'class',
+	content: ['./src/**/*.{html,js,svelte,ts}', require('path').join(require.resolve('@skeletonlabs/skeleton'), '../**/*.{html,js,svelte,ts}')],
+	theme: {
+		extend: {},
+	},
+	plugins: [...require('@skeletonlabs/skeleton/tailwind/skeleton.cjs')()],
+}

package/tests/test.ts

@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('index page has expected h1', async ({ page }) => {
+	await page.goto('/');
+	await expect(page.getByRole('heading', { name: 'Welcome to SvelteKit' })).toBeVisible();
+});

package/tsconfig.json

@@ -0,0 +1,19 @@
+{
+	"extends": "./.svelte-kit/tsconfig.json",
+	"compilerOptions": {
+		"allowJs": true,
+		"checkJs": true,
+		"esModuleInterop": true,
+		"forceConsistentCasingInFileNames": true,
+		"resolveJsonModule": true,
+		"skipLibCheck": true,
+		"sourceMap": true,
+		"strict": true,
+		"noImplicitAny": false
+	},
+	"exclude": ["node_modules"]
+	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
+	//
+	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
+	// from the referenced tsconfig.json - TypeScript does not merge them in
+}

package/vite.config.ts

@@ -0,0 +1,9 @@
+import { sveltekit } from '@sveltejs/kit/vite';
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+	plugins: [sveltekit()],
+	test: {
+		include: ['src/**/*.{test,spec}.{js,ts}']
+	}
+});

package/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/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/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/components/File/FileUploader.svelte

@@ -1,135 +0,0 @@
-<script >import DropZone from "svelte-file-dropzone/src/index";
-import { Fa } from "svelte-fa/src/index.js";
-import { Spinner, Button, Row, Col, Input } from "sveltestrap";
-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 start = "";
-export let submit = "";
-export let context = "";
-export let data;
-$:
-  model = data;
-$:
-  submitBt = "submit";
-let maxSize = 0;
-const dispatch = createEventDispatcher();
-let fx;
-let 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;
-  }
-});
-async function load() {
-  let url = start + "?id=" + id + "&version=" + version;
-  const res = await Api.get(url);
-  model = await res.json();
-  console.log("fileupload", model);
-}
-function handleFilesSelect(e) {
-  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) {
-    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 });
-    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("SUBMIT");
-  if (files.accepted.length > 0) {
-    console.log(files);
-    const formData = new FormData();
-    formData.append("files", "123");
-    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  -->
-      <Row>
-
-        <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>
-
-      </Row> 
-
-      <Button id="{submitBt}" color="primary" style="display:none" ><Fa icon={faSave}/></Button>      
-
-    {:else} <!-- while data is not loaded show a loading information -->
-
-    <Spinner color="info" size="sm" type ="grow" />
-    {/if}
-
-</form> 
-
-

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

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

package/components/ListView.svelte

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

package/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/index.d.ts

@@ -1,9 +0,0 @@
-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';

package/index.js

@@ -1,9 +0,0 @@
-// Reexport your entry components here
-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';

package/models/Models.d.ts

@@ -1,31 +0,0 @@
-export interface FileInfo {
-    name: string;
-    type: string;
-    lenght: number;
-    description: string;
-    validationHash: string;
-}
-export interface FileUploaderModel {
-    accept: string[];
-    existingFiles: FileInfo[];
-    descriptionType: number;
-    multiple: boolean;
-    maxSize: number;
-    lastModification: Date;
-}
-export interface Files {
-    accepted: Blob[];
-    rejected: Blob[];
-}
-export type user = {
-    name: string;
-};
-export interface FileObj {
-    path: string;
-    lastModified: number;
-    lastModifiedDate: Date;
-    name: string;
-    size: number;
-    type: string;
-    webkitRelativePath: string;
-}

package/models/Models.js

@@ -1 +0,0 @@
-export {};