@bexis2/bexis2-core-ui 0.0.3 → 0.0.5

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/package.json

@@ -1,24 +1,43 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "private": false,
+  "scripts": {
+    "dev": "vite dev",
+    "package": "svelte-package `./package/`",
+    "build": "vite build sync --watch",
+    "preview": "vite preview",
+    "test": "playwright test",
+    "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
+    "test:unit": "vitest",
+    "lint": "prettier --plugin-search-dir . --check . && eslint .",
+    "format": "prettier --plugin-search-dir . --write .",
+    "init": "npm init --scope bexis2",
+    "link": "npm link",
+    "publish": "npm publish --access public"
+  },
   "devDependencies": {
     "@playwright/test": "^1.28.1",
-    "@sveltejs/adapter-auto": "^1.0.0-next.90",
-    "@sveltejs/kit": "^1.0.0-next.587",
-    "@sveltejs/package": "^1.0.0-next.6",
+    "@skeletonlabs/skeleton": "^1.2.5",
+    "@sveltejs/adapter-auto": "^2.0.0",
+    "@sveltejs/kit": "^1.5.0",
     "@typescript-eslint/eslint-plugin": "^5.45.0",
     "@typescript-eslint/parser": "^5.45.0",
+    "autoprefixer": "^10.4.14",
     "eslint": "^8.28.0",
     "eslint-config-prettier": "^8.5.0",
     "eslint-plugin-svelte3": "^4.0.0",
+    "postcss": "^8.4.23",
     "prettier": "^2.8.0",
     "prettier-plugin-svelte": "^2.8.1",
-    "svelte": "^3.55.0",
-    "svelte-check": "^2.9.2",
+    "svelte": "^3.54.0",
+    "svelte-check": "^3.0.1",
+    "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
-    "typescript": "^4.9.3",
-    "vite": "^4.0.0"
+    "typescript": "^5.0.0",
+    "vite": "^4.3.0",
+    "vitest": "^0.25.3"
   },
   "type": "module",
   "module": "./src/lib/index.ts",
@@ -33,144 +52,11 @@
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
     "@fortawesome/free-regular-svg-icons": "^6.2.1",
     "@fortawesome/free-solid-svg-icons": "^6.2.1",
+    "@sveltejs/package": "^2.0.2",
     "axios": "^1.2.1",
-    "es6-promise": "^3.3.1",
-    "esbuild": "^0.16.6",
-    "escape-string-regexp": "^4.0.0",
-    "eslint-scope": "^5.1.1",
-    "eslint-utils": "^3.0.0",
-    "eslint-visitor-keys": "^3.3.0",
-    "esm-env": "^1.0.0",
-    "espree": "^9.4.1",
-    "esquery": "^1.4.0",
-    "esrecurse": "^4.3.0",
-    "estraverse": "^4.3.0",
-    "esutils": "^2.0.3",
-    "fast-deep-equal": "^3.1.3",
-    "fast-glob": "^3.2.12",
-    "fast-json-stable-stringify": "^2.1.0",
-    "fast-levenshtein": "^2.0.6",
-    "fastq": "^1.14.0",
-    "file-entry-cache": "^6.0.1",
-    "fill-range": "^7.0.1",
-    "find-up": "^5.0.0",
-    "flat-cache": "^3.0.4",
-    "flatted": "^3.2.7",
-    "fs.realpath": "^1.0.0",
-    "function-bind": "^1.1.1",
-    "glob": "^7.2.3",
-    "glob-parent": "^5.1.2",
-    "globals": "^13.19.0",
-    "globalyzer": "^0.1.0",
-    "globby": "^11.1.0",
-    "globrex": "^0.1.2",
-    "graceful-fs": "^4.2.10",
-    "grapheme-splitter": "^1.0.4",
-    "has": "^1.0.3",
-    "has-flag": "^4.0.0",
-    "ignore": "^5.2.1",
-    "import-fresh": "^3.3.0",
-    "import-meta-resolve": "^2.2.0",
-    "imurmurhash": "^0.1.4",
-    "inflight": "^1.0.6",
-    "inherits": "^2.0.4",
-    "is-binary-path": "^2.1.0",
-    "is-core-module": "^2.11.0",
-    "is-extglob": "^2.1.1",
-    "is-glob": "^4.0.3",
-    "is-number": "^7.0.0",
-    "is-path-inside": "^3.0.3",
-    "isexe": "^2.0.0",
-    "js-sdsl": "^4.2.0",
-    "js-yaml": "^4.1.0",
-    "json-schema-traverse": "^0.4.1",
-    "json-stable-stringify-without-jsonify": "^1.0.1",
-    "kleur": "^4.1.5",
-    "levn": "^0.4.1",
-    "locate-path": "^6.0.0",
-    "lodash.merge": "^4.6.2",
-    "lower-case": "^2.0.2",
-    "lru-cache": "^6.0.0",
-    "magic-string": "^0.27.0",
-    "merge2": "^1.4.1",
-    "micromatch": "^4.0.5",
-    "mime": "^3.0.0",
-    "min-indent": "^1.0.1",
-    "minimatch": "^3.1.2",
-    "minimist": "^1.2.7",
-    "mkdirp": "^0.5.6",
-    "mri": "^1.2.0",
-    "mrmime": "^1.0.1",
-    "ms": "^2.1.2",
-    "nanoid": "^3.3.4",
-    "natural-compare": "^1.4.0",
-    "natural-compare-lite": "^1.4.0",
-    "no-case": "^3.0.4",
-    "normalize-path": "^3.0.0",
-    "once": "^1.4.0",
-    "optionator": "^0.9.1",
-    "p-limit": "^3.1.0",
-    "p-locate": "^5.0.0",
-    "parent-module": "^1.0.1",
-    "pascal-case": "^3.1.2",
-    "path-exists": "^4.0.0",
-    "path-is-absolute": "^1.0.1",
-    "path-key": "^3.1.1",
-    "path-parse": "^1.0.7",
-    "path-type": "^4.0.0",
-    "picocolors": "^1.0.0",
-    "picomatch": "^2.3.1",
-    "playwright-core": "^1.28.1",
-    "postcss": "^8.4.20",
-    "prelude-ls": "^1.2.1",
-    "punycode": "^2.1.1",
-    "queue-microtask": "^1.2.3",
-    "readdirp": "^3.6.0",
-    "regexpp": "^3.2.0",
-    "resolve": "^1.22.1",
-    "resolve-from": "^4.0.0",
-    "reusify": "^1.0.4",
-    "rimraf": "^3.0.2",
-    "rollup": "^3.7.4",
-    "run-parallel": "^1.2.0",
-    "sade": "^1.8.1",
-    "sander": "^0.5.1",
-    "semver": "^7.3.8",
-    "set-cookie-parser": "^2.5.1",
-    "shebang-command": "^2.0.0",
-    "shebang-regex": "^3.0.0",
-    "sirv": "^2.0.2",
-    "slash": "^3.0.0",
-    "sorcery": "^0.10.0",
-    "source-map-js": "^1.0.2",
-    "sourcemap-codec": "^1.4.8",
-    "streamsearch": "^1.1.0",
-    "strip-ansi": "^6.0.1",
-    "strip-indent": "^3.0.0",
-    "strip-json-comments": "^3.1.1",
-    "supports-color": "^7.2.0",
-    "supports-preserve-symlinks-flag": "^1.0.0",
+    "svelte": "^3.54.0",
     "svelte-fa": "^3.0.3",
-    "svelte-file-dropzone": "^1.0.0",
-    "svelte-hmr": "^0.15.1",
-    "svelte-preprocess": "^4.10.7",
-    "svelte2tsx": "^0.5.22",
-    "sveltestrap": "^5.10.0",
-    "text-table": "^0.2.0",
-    "tiny-glob": "^0.2.9",
-    "to-regex-range": "^5.0.1",
-    "totalist": "^3.0.0",
-    "tsutils": "^3.21.0",
-    "type-check": "^0.4.0",
-    "type-fest": "^0.20.2",
-    "undici": "^5.14.0",
-    "uri-js": "^4.4.1",
-    "vitefu": "^0.2.3",
-    "which": "^2.0.2",
-    "word-wrap": "^1.2.3",
-    "wrappy": "^1.0.2",
-    "yallist": "^4.0.0",
-    "yocto-queue": "^0.1.0"
+    "svelte-file-dropzone": "^2.0.1"
   },
   "author": "David Schöne",
   "license": "ISC",
@@ -187,27 +73,9 @@
     "libary"
   ],
   "exports": {
-    "./package.json": "./package.json",
-    "./components/File/FileIcon.svelte": "./components/File/FileIcon.svelte",
-    "./components/File/FileInfo.svelte": "./components/File/FileInfo.svelte",
-    "./components/File/FileUploader.svelte": "./components/File/FileUploader.svelte",
-    "./components/ListView.svelte": "./components/ListView.svelte",
-    "./css/core.ui.postcss": "./css/core.ui.postcss",
-    "./css/themes/theme-crimson.css": "./css/themes/theme-crimson.css",
-    "./css/themes/theme-gold-nouveau.css": "./css/themes/theme-gold-nouveau.css",
-    "./css/themes/theme-hamlindigo.css": "./css/themes/theme-hamlindigo.css",
-    "./css/themes/theme-modern.css": "./css/themes/theme-modern.css",
-    "./css/themes/theme-rocket.css": "./css/themes/theme-rocket.css",
-    "./css/themes/theme-sahara.css": "./css/themes/theme-sahara.css",
-    "./css/themes/theme-seafoam.css": "./css/themes/theme-seafoam.css",
-    "./css/themes/theme-seasonal.css": "./css/themes/theme-seasonal.css",
-    "./css/themes/theme-skeleton.css": "./css/themes/theme-skeleton.css",
-    "./css/themes/theme-vintage.css": "./css/themes/theme-vintage.css",
-    ".": "./index.js",
-    "./models/Models": "./models/Models.js",
-    "./services/Api": "./services/Api.js",
-    "./stores/apistore": "./stores/apistore.js",
-    "./TableView.svelte": "./TableView.svelte"
-  },
-  "svelte": "./index.js"
-}
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    }
+  }
+}

package/playwright.config.ts

@@ -0,0 +1,11 @@
+import type { PlaywrightTestConfig } from '@playwright/test';
+
+const config: PlaywrightTestConfig = {
+	webServer: {
+		command: 'npm run build && npm run preview',
+		port: 4173
+	},
+	testDir: 'tests'
+};
+
+export default config;

package/postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+	plugins: {
+		tailwindcss: {},
+		autoprefixer: {},
+	},
+}

package/src/app.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="@sveltejs/kit" />
+
+// See https://kit.svelte.dev/docs/types#app
+// for information about these interfaces
+// and what to do when importing types
+declare namespace App {
+	// interface Error {}
+	// interface Locals {}
+	// interface PageData {}
+	// interface Platform {}
+}

package/src/app.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+
+
+
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%sveltekit.head%
+	</head>
+	<body>
+		<div>%sveltekit.body%</div>
+	</body>
+</html>

package/src/app.postcss

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

package/src/index.test.ts

@@ -0,0 +1,7 @@
+import { describe, it, expect } from 'vitest';
+
+describe('sum test', () => {
+	it('adds 1 + 2 to equal 3', () => {
+		expect(1 + 2).toBe(3);
+	});
+});

package/src/lib/components/File/FileUploader.svelte

@@ -0,0 +1,217 @@
+<script type="ts">
+
+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/src/lib/components/ListView.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+
+type x={
+ name:string
+}
+
+let result:x = {name:"david"}
+
+</script>
+ 
+<h1>MyList</h1>
+{result.name}
+<b>from bexis-lib</b>

package/src/lib/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>