@enki-tek/fms-web-components 0.0.89 → 0.1.0

package/components/Accordion/Accordion.svelte

@@ -584,6 +584,9 @@ export let stayOpen = true;
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 :global(.accordion-body) {
   color: #6C757D;
   font-size: 16px;

package/components/Accordion/AccordionItem.svelte

@@ -585,6 +585,9 @@ export let header;
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 :global(.accordion-body) {
   color: #6C757D;
   font-size: 16px;

package/components/Badge/Badge.svelte

@@ -589,4 +589,7 @@ if (badgeConfig.hasOwnProperty(config)) {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Breadcrumb/Breadcrumb.svelte

@@ -599,4 +599,7 @@ let length = newBreadcrumbs.length;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Button/Button.svelte

@@ -1336,6 +1336,9 @@
   font-weight: 400;
   line-height: normal;
 }
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}
 .ebg-active-secondary {
   background-color: #3AC82E;
   color: #ffffff;

package/components/CardIcon/CardIcon.svelte

@@ -666,4 +666,7 @@ if (titleConfig.includes(titleLocation)) {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconBody.svelte

@@ -661,4 +661,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconSubtitle.svelte

@@ -670,4 +670,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/CardIcon/CardiconTitle.svelte

@@ -670,4 +670,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Charts/Barchart.svelte

@@ -0,0 +1,74 @@
+<!-- src/BarChart.svelte -->
+<script>
+    import { onMount, onDestroy } from 'svelte';
+    import { Chart, registerables } from 'chart.js';
+  
+    // Register all necessary components
+    Chart.register(...registerables);
+  
+    let chart;
+    let canvas;
+  
+    // Chart configuration
+    const chartData = {
+      labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+      datasets: [
+        {
+          label: '# of Votes',
+          backgroundColor: [
+            'rgba(255, 99, 132, 0.2)',
+            'rgba(54, 162, 235, 0.2)',
+            'rgba(255, 206, 86, 0.2)',
+            'rgba(75, 192, 192, 0.2)',
+            'rgba(153, 102, 255, 0.2)',
+            'rgba(255, 159, 64, 0.2)',
+          ],
+          borderColor: [
+            'rgba(255, 99, 132, 1)',
+            'rgba(54, 162, 235, 1)',
+            'rgba(255, 206, 86, 1)',
+            'rgba(75, 192, 192, 1)',
+            'rgba(153, 102, 255, 1)',
+            'rgba(255, 159, 64, 1)',
+          ],
+          borderWidth: 1,
+          data: [12, 19, 3, 5, 2, 3],
+        },
+      ],
+    };
+  
+    const chartOptions = {
+      responsive: true,
+      maintainAspectRatio: false, // Allows the chart to resize freely
+      scales: {
+        y: {
+          beginAtZero: true,
+        },
+      },
+    };
+  
+    onMount(() => {
+      const ctx = canvas.getContext('2d');
+      chart = new Chart(ctx, {
+        type: 'bar', // Set chart type to 'bar'
+        data: chartData,
+        options: chartOptions,
+      });
+    });
+  
+    onDestroy(() => {
+      if (chart) {
+        chart.destroy();
+      }
+    });
+  </script>
+  
+  <canvas bind:this={canvas} width="400" height="200" />
+  
+  <style>
+    canvas {
+      max-width: 100%;
+      height: 100%; /* Ensures the canvas takes the full height of the container */
+    }
+  </style>
+  

package/components/Charts/Barchart.svelte.d.ts

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

package/components/Charts/DoughnutChart.svelte

@@ -0,0 +1,73 @@
+<!-- src/PieChart.svelte -->
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+
+	export let data = {};
+	export let label = '';
+	export let width = 200;
+	export let height = 200;
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	let chart;
+	let canvas;
+
+	// Chart configuration
+	const chartData = {
+		labels: Object.keys(data),
+		datasets: [
+			{
+				label: label,
+				data: Object.values(data)
+			}
+		]
+	};
+
+	const chartOptions = {
+		plugins: {
+			legend: {
+				position: 'bottom' // Set legend position to bottom
+			},
+			datalabels: {
+				anchor: 'center',
+				align: 'end',
+				clamp: true,
+                font: {
+                    size: 16, // Set the font size here
+                    weight: 'bold', // Optional: set font weight
+                    family: 'Roboto', // Set the font family to Roboto
+                },
+				formatter: (value) => {
+					return value; // Show the value directly
+				}
+			}
+		},
+		responsive: true,
+		maintainAspectRatio: false // Allows the chart to resize freely
+	};
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		chart = new Chart(ctx, {
+			type: 'doughnut',
+			data: chartData,
+			options: chartOptions
+		});
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto; /* Ensures the canvas takes the full height of the container */
+	}
+</style>

package/components/Charts/DoughnutChart.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  DoughnutChartProps */
+/** @typedef {typeof __propDef.events}  DoughnutChartEvents */
+/** @typedef {typeof __propDef.slots}  DoughnutChartSlots */
+export default class DoughnutChart extends SvelteComponentTyped<{
+    label?: string | undefined;
+    width?: number | undefined;
+    data?: {} | undefined;
+    height?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type DoughnutChartProps = typeof __propDef.props;
+export type DoughnutChartEvents = typeof __propDef.events;
+export type DoughnutChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        width?: number | undefined;
+        data?: {} | undefined;
+        height?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Charts/LineChart.svelte

@@ -0,0 +1,62 @@
+<!-- src/MyChart.svelte -->
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+
+	export let data = {};
+
+	// Register all necessary components
+	Chart.register(...registerables);
+
+	let chart;
+	let canvas;
+
+	// Chart configuration
+	const chartData = {
+		labels: ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
+		datasets: [
+			{
+				label: 'My First dataset',
+				backgroundColor: 'rgba(75, 192, 192, 0.2)',
+				borderColor: 'rgba(75, 192, 192, 1)',
+				borderWidth: 1,
+				data: [40, 30, 20, 50, 60, 70, 80]
+			}
+		]
+	};
+
+	const chartOptions = {
+		responsive: true,
+		maintainAspectRatio: false, // Allows the chart to resize without maintaining aspect ratio
+		scales: {
+			y: {
+				beginAtZero: true
+			}
+		}
+	};
+
+	onMount(() => {
+		const ctx = canvas.getContext('2d');
+		chart = new Chart(ctx, {
+			type: 'line', // Change this to 'bar' for a bar chart
+			data: chartData,
+			options: chartOptions
+		});
+	});
+
+	// Cleanup when component is destroyed
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto;
+	}
+</style>

package/components/Charts/LineChart.svelte.d.ts

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

package/components/Charts/PieChart.svelte

@@ -0,0 +1,75 @@
+<!-- src/PieChart.svelte -->
+<script>
+	import { onMount, onDestroy } from 'svelte';
+	import { Chart, registerables } from 'chart.js';
+	import ChartDataLabels from 'chartjs-plugin-datalabels';
+
+	export let data = {};
+	export let label = '';
+	export let width = 300;
+	export let height = 300;
+	// Register all necessary components
+	Chart.register(...registerables);
+	Chart.register(ChartDataLabels);
+	let chart;
+	let canvas;
+
+	// Chart configuration
+	const chartData = {
+		labels: Object.keys(data),
+		datasets: [
+			{
+				label: label,
+				data: Object.values(data)
+			}
+		]
+	};
+
+	const chartOptions = {
+		plugins: {
+			legend: {
+				position: 'bottom' // Set legend position to bottom
+			},
+			datalabels: {
+				anchor: 'center',
+				align: 'end',
+                clamp: true,
+                font: {
+                    size: 16, // Set the font size here
+                    weight: 'bold', // Optional: set font weight
+                    family: 'Roboto', // Set the font family to Roboto
+                },
+				formatter: (value) => {
+					return value; // Show the value directly
+				}
+			}
+		},
+		responsive: true,
+		maintainAspectRatio: false // Allows the chart to resize freely
+	};
+
+	onMount(() => {
+		// console.log(chartData);
+		const ctx = canvas.getContext('2d');
+		chart = new Chart(ctx, {
+			type: 'pie', // Set chart type to 'pie'
+			data: chartData,
+			options: chartOptions
+		});
+	});
+
+	onDestroy(() => {
+		if (chart) {
+			chart.destroy();
+		}
+	});
+</script>
+
+<canvas bind:this={canvas} {width} {height} />
+
+<style>
+	canvas {
+		max-width: 100%;
+		height: auto; /* Ensures the canvas takes the full height of the container */
+	}
+</style>

package/components/Charts/PieChart.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  PieChartProps */
+/** @typedef {typeof __propDef.events}  PieChartEvents */
+/** @typedef {typeof __propDef.slots}  PieChartSlots */
+export default class PieChart extends SvelteComponentTyped<{
+    label?: string | undefined;
+    width?: number | undefined;
+    data?: {} | undefined;
+    height?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type PieChartProps = typeof __propDef.props;
+export type PieChartEvents = typeof __propDef.events;
+export type PieChartSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        label?: string | undefined;
+        width?: number | undefined;
+        data?: {} | undefined;
+        height?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/CheckBox/Checkbox.svelte

@@ -619,4 +619,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Dropdown/Dropdown.svelte

@@ -644,4 +644,7 @@ export let title = "Dropdowns";
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Dropdown/DropdownItem.svelte

@@ -637,4 +637,7 @@ export let disabled = false;
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/EnkiSidbar/EnkiSidebar.svelte

@@ -718,4 +718,7 @@ li.icons:hover {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/EnkiSidbar/NavIcon.svelte

@@ -661,4 +661,7 @@ li.icons:hover {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/EnkiSidbar/NavItem.svelte

@@ -659,4 +659,7 @@ li.icons:hover {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/EnkiSidbar/NavLink.svelte

@@ -668,4 +668,7 @@ li.icons:hover {
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Header/Brand.svelte

@@ -1,24 +1,24 @@
 <script>
-	import {
-		NavbarBrand,
-	} from 'sveltestrap';
+	import { NavbarBrand } from 'sveltestrap';
 
-    let defaultBrandImage='https://i.postimg.cc/QCTH3KJ2/logo.png';
-    export let brandImage='https://i.postimg.cc/QCTH3KJ2/logo.png';
-    export let brandName='Farm Management System';
+	let defaultBrandImage = 'https://i.postimg.cc/QCTH3KJ2/logo.png';
+	export let brandImage = 'https://i.postimg.cc/QCTH3KJ2/logo.png';
+	export let brandName = 'Farm Management System';
 
+	const verifyImage = (brandImage) => {
+		const imageURLVerification =
+			/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
+		return brandImage.match(imageURLVerification);
+	};
 
-    const imageURLVerification =
-		/(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g;
-	let result = brandImage.match(imageURLVerification);
-	if (result == null) {
-        brandImage = defaultBrandImage;
-    }    
+	if (!verifyImage(brandImage)) {
+		brandImage = defaultBrandImage;
+	}
 </script>
 
-<NavbarBrand href="/" class='efs-small headerLogo' style='font-weight:300;'>
-    <img src={brandImage} alt="ENKITEK" >
-    {brandName}
+<NavbarBrand href="/" class="efs-small headerLogo" style="font-weight:300;">
+	<img src={brandImage} alt="ENKITEK" />
+	{brandName}
 </NavbarBrand>
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
@@ -31,11 +31,17 @@
   display: flex;
   flex-direction: column;
   color: #000000;
+  filter: grayscale(100%) brightness(0) invert(1);
 }
 :global(.headerLogo img) {
   width: 144px;
   height: 34px;
 }
+.bi {
+  display: inline-block;
+  width: 1rem;
+  height: 1rem;
+}
 :global(.headerIcons) {
   display: flex;
   align-items: center;
@@ -640,4 +646,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}</style>
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
+}</style>