@bexis2/bexis2-core-ui 0.1.2 → 0.1.4

package/README.md

@@ -1,5 +1,8 @@
 # bexis-core-ui
 
+## v0.1.3 
+> test table
+
 ## v0.1.2
 ### update
 - MultiSelect 

package/dist/components/Table/Table.svelte

@@ -7,6 +7,9 @@ import {
   addColumnFilters,
   addTableFilter
 } from "svelte-headless-table/plugins";
+import { computePosition, autoUpdate, offset, shift, flip, arrow } from "@floating-ui/dom";
+import { storePopup } from "@skeletonlabs/skeleton";
+storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 import TableFilter from "./TableFilter.svelte";
 import TablePagination from "./TablePagination.svelte";
 import { columnFilter, searchFilter } from "./filter";
@@ -74,7 +77,8 @@ const tableColumns = [
                 filterValue: filterValue2,
                 id,
                 tableId,
-                values
+                values,
+                toFilterableValueFn
               });
             }
           } : void 0,
@@ -146,12 +150,13 @@ const { filterValue } = pluginStates.tableFilter;
 						<tr {...rowAttrs} class="bg-primary-300">
 							{#each headerRow.cells as cell (cell.id)}
 								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-									<th scope="col" class="!p-2" {...attrs}>
+									<th scope="col" class="!p-2 w-min" {...attrs}>
 										<div class="flex w-full justify-between items-center">
 											<div class="flex gap-1">
 												<span
 													class:underline={props.sort.order}
 													class:normal-case={cell.id !== cell.label}
+													class:cursor-pointer={!props.sort.disabled}
 													on:click={props.sort.toggle}
 													on:keydown={props.sort.toggle}
 												>
@@ -187,7 +192,7 @@ const { filterValue } = pluginStates.tableFilter;
 						<tr {...rowAttrs}>
 							{#each row.cells as cell (cell?.id)}
 								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2">
+									<td {...attrs} class="!p-2 w-min">
 										<div class="flex items-center w-full h-full table-cell-fit">
 											<Render of={cell.render()} />
 										</div>

package/dist/components/Table/TableFilter.svelte

@@ -5,6 +5,7 @@ export let filterValue;
 export let values;
 export let id;
 export let tableId;
+export let toFilterableValueFn = void 0;
 let firstOption;
 let firstValue;
 let secondOption;
@@ -96,7 +97,7 @@ const popupFeatured = {
   target: popupId,
   placement: "bottom-start"
 };
-let type = typeof $values[0];
+let type = typeof (toFilterableValueFn ? toFilterableValueFn($values[0]) : $values[0]);
 if (type === "object") {
   if ($values[0] instanceof Date) {
     type = "date";
@@ -115,7 +116,7 @@ if (type === "object") {
 	</button>
 
 	<div data-popup={`${popupId}`}>
-		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min">
+		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"

package/dist/components/Table/TableFilter.svelte.d.ts

@@ -5,6 +5,7 @@ declare const __propDef: {
         values: any;
         id: any;
         tableId: any;
+        toFilterableValueFn?: ((value: any) => any) | undefined;
     };
     events: {
         click: MouseEvent;

package/dist/components/Table/filter.js

@@ -55,7 +55,7 @@ const dateFilter = (filterOption, filterValue, value) => {
 };
 const numericFilter = ({ filterValue, value }) => {
     const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-    if (firstFilterValue == null && !secondFilterValue == null) {
+    if (firstFilterValue == null && secondFilterValue == null) {
         return true;
     }
     else if ((firstFilterOption == null || firstFilterValue == null) &&

package/dist/components/page/menu/Menu.svelte

@@ -1,13 +1,11 @@
 <script>import Fa from "svelte-fa/src/fa.svelte";
 import { faCog } from "@fortawesome/free-solid-svg-icons";
 import { onMount } from "svelte";
-import { setApiConfig } from "../../../stores/apistore";
 import { getMenuItems } from "./MenuDataCaller";
 import MenuBar from "./MenuBar.svelte";
 import SettingsBar from "./SettingsBar.svelte";
 let menu;
 onMount(async () => {
-  setApiConfig("https://localhost:44345", "david", "123456");
   menu = await getMenuItems();
 });
 </script>

package/dist/stores/apistore.js

@@ -19,4 +19,5 @@ export function setApiConfig(_host, _user, _pw) {
     hostStore.update((h) => (h = _host));
     usernameStore.update((u) => (u = _user));
     passwordStore.update((p) => (p = _pw));
+    console.log('overwrite host', _host);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bexis2/bexis2-core-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "private": false,
   "scripts": {
     "dev": "vite dev",
@@ -39,8 +39,6 @@
     "raw-loader": "^4.0.2",
     "svelte": "^3.54.0",
     "svelte-check": "^3.0.1",
-    "svelte-fa": "^3.0.3",
-    "svelte-headless-table": "^0.17.3",
     "tailwindcss": "^3.3.2",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
@@ -69,7 +67,9 @@
     "highlight.js": "^11.8.0",
     "highlightjs-svelte": "^1.0.6",
     "svelte": "^3.54.0",
+    "svelte-fa": "^3.0.4",
     "svelte-file-dropzone": "^2.0.1",
+    "svelte-headless-table": "^0.17.3",
     "svelte-select": "^5.6.0",
     "vest": "^4.6.11"
   },

package/src/lib/components/Table/Table.svelte

@@ -8,6 +8,10 @@
 		addColumnFilters,
 		addTableFilter
 	} from 'svelte-headless-table/plugins';
+	import { computePosition, autoUpdate, offset, shift, flip, arrow } from '@floating-ui/dom';
+	import { storePopup } from '@skeletonlabs/skeleton';
+
+	storePopup.set({ computePosition, autoUpdate, offset, shift, flip, arrow });
 
 	import TableFilter from './TableFilter.svelte';
 	import TablePagination from './TablePagination.svelte';
@@ -93,7 +97,8 @@
 												filterValue,
 												id,
 												tableId,
-												values
+												values,
+												toFilterableValueFn
 											});
 										}
 								  }
@@ -171,12 +176,13 @@
 						<tr {...rowAttrs} class="bg-primary-300">
 							{#each headerRow.cells as cell (cell.id)}
 								<Subscribe attrs={cell.attrs()} props={cell.props()} let:props let:attrs>
-									<th scope="col" class="!p-2" {...attrs}>
+									<th scope="col" class="!p-2 w-min" {...attrs}>
 										<div class="flex w-full justify-between items-center">
 											<div class="flex gap-1">
 												<span
 													class:underline={props.sort.order}
 													class:normal-case={cell.id !== cell.label}
+													class:cursor-pointer={!props.sort.disabled}
 													on:click={props.sort.toggle}
 													on:keydown={props.sort.toggle}
 												>
@@ -212,7 +218,7 @@
 						<tr {...rowAttrs}>
 							{#each row.cells as cell (cell?.id)}
 								<Subscribe attrs={cell.attrs()} let:attrs>
-									<td {...attrs} class="!p-2">
+									<td {...attrs} class="!p-2 w-min">
 										<div class="flex items-center w-full h-full table-cell-fit">
 											<Render of={cell.render()} />
 										</div>

package/src/lib/components/Table/TableFilter.svelte

@@ -8,6 +8,7 @@
 	export let values;
 	export let id;
 	export let tableId;
+	export let toFilterableValueFn: undefined | ((value: any) => any) = undefined;
 
 	let firstOption;
 	let firstValue;
@@ -104,7 +105,7 @@
 		placement: 'bottom-start'
 	};
 
-	let type: string = typeof $values[0];
+	let type: string = typeof (toFilterableValueFn ? toFilterableValueFn($values[0]) : $values[0]);
 	if (type === 'object') {
 		if ($values[0] instanceof Date) {
 			type = 'date';
@@ -123,7 +124,7 @@
 	</button>
 
 	<div data-popup={`${popupId}`}>
-		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min">
+		<div class="card p-3 absolute grid gap-2 shadow-lg z-10 w-min bg-base-100">
 			<button
 				class="btn variant-filled-primary btn-sm"
 				type="button"

package/src/lib/components/Table/filter.ts

@@ -62,7 +62,7 @@ const dateFilter = (filterOption, filterValue, value) => {
 
 const numericFilter: ColumnFilterFn = ({ filterValue, value }) => {
 	const [firstFilterOption, firstFilterValue, secondFilterOption, secondFilterValue] = filterValue;
-	if (firstFilterValue == null && !secondFilterValue == null) {
+	if (firstFilterValue == null && secondFilterValue == null) {
 		return true;
 	} else if (
 		(firstFilterOption == null || firstFilterValue == null) &&

package/src/lib/components/page/menu/Menu.svelte

@@ -4,9 +4,7 @@
  import { faCog } from '@fortawesome/free-solid-svg-icons'
 
  import { onMount } from 'svelte';
-
-
- import { setApiConfig } from '../../../stores/apistore';
+ 
  import { getMenuItems}  from './MenuDataCaller';
 
  import type { Menu } from "./menu";
@@ -17,9 +15,7 @@
  let menu:Menu;
 
  onMount(async () => {
-
-  setApiConfig("https://localhost:44345","david","123456");
-
+  
   menu = await getMenuItems();
 
 })

package/src/lib/stores/apistore.ts

@@ -22,7 +22,10 @@ passwordStore.subscribe((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));
+
+	console.log('overwrite host',_host);
 }