@enki-tek/fms-web-components 0.0.90 → 0.1.1

package/components/EnkiSidbar/EnkiSidebar.svelte.d.ts

@@ -2,9 +2,9 @@
 /** @typedef {typeof __propDef.events}  EnkiSidebarEvents */
 /** @typedef {typeof __propDef.slots}  EnkiSidebarSlots */
 export default class EnkiSidebar extends SvelteComponentTyped<{
+    companyName?: string | undefined;
     isOpen?: boolean | undefined;
     backdrop?: boolean | undefined;
-    companyName?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -20,9 +20,9 @@ export type EnkiSidebarSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
+        companyName?: string | undefined;
         isOpen?: boolean | undefined;
         backdrop?: boolean | undefined;
-        companyName?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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/EnkiTable/EnkiTable.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  EnkiTableSlots */
 export default class EnkiTable extends SvelteComponentTyped<{
     [x: string]: any;
-    size?: string | undefined;
-    type?: string | undefined;
     className?: string | undefined;
+    type?: string | undefined;
+    size?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -19,9 +19,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        size?: string | undefined;
-        type?: string | undefined;
         className?: string | undefined;
+        type?: string | undefined;
+        size?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

package/components/EnkiTable/TableCell.svelte.d.ts

@@ -4,9 +4,9 @@
 export default class TableCell extends SvelteComponentTyped<{
     [x: string]: any;
     className?: string | undefined;
+    dataLabel?: string | undefined;
     colspan?: number | undefined;
     rowspan?: number | undefined;
-    dataLabel?: string | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {
@@ -21,9 +21,9 @@ declare const __propDef: {
     props: {
         [x: string]: any;
         className?: string | undefined;
+        dataLabel?: string | undefined;
         colspan?: number | undefined;
         rowspan?: number | undefined;
-        dataLabel?: string | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;

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>

package/components/Header/Header.scss

@@ -1,64 +1,70 @@
 @import './../variable.scss';
 
 :global(.headerLogo) {
-    display: flex;
-    flex-direction: column;
-    color: $black;
+	display: flex;
+	flex-direction: column;
+	color: $black;
+	filter: grayscale(100%) brightness(0) invert(1);
 }
 
 :global(.headerLogo img) {
-    width: 144px;
-    height: 34px;
+	width: 144px;
+	height: 34px;
+}
+
+.bi {
+	display: inline-block;
+	width: 1rem;
+	height: 1rem;
 }
 
 :global(.headerIcons) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid $secondary;
-    border-radius: 50%;
-    color: $secondary;
-    padding: 8px 9px;
-    height:45px;
-    width:45px;
-    font-weight:bold;
-    
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	border: 1px solid $secondary;
+	border-radius: 50%;
+	color: $secondary;
+	padding: 8px 9px;
+	height: 45px;
+	width: 45px;
+	font-weight: bold;
 }
 
-.avatar-text{
-    color: black ;
-    margin-top: 2px;
-    text-transform: capitalize;
+.avatar-text {
+	color: black;
+	margin-top: 2px;
+	text-transform: capitalize;
 }
 
 :global(.headerIcons i) {
-    padding: 0 4px;
-    font-size: 18px;
+	padding: 0 4px;
+	font-size: 18px;
 }
 
 :global(.userProfile) {
-    display: flex;
-    align-items: center;
-    gap: 15px;
+	display: flex;
+	align-items: center;
+	gap: 15px;
 }
 
 :global(.userProfileBox) {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-end;
-    color: $gray-600;
+	display: flex;
+	flex-direction: column;
+	align-items: flex-end;
+	color: $gray-600;
 }
 
 :global(.userProfile img) {
-    width: 45px;
-    height: 45px;
-    border-radius: 50%;
+	width: 45px;
+	height: 45px;
+	border-radius: 50%;
 }
 
 :global(.nav-link:focus, .nav-link:hover) {
-    color: $secondary;
+	color: $secondary;
 }
 
 :global(a:hover) {
-    color: $black;
+	color: $black;
 }

package/components/Header/Header.svelte

@@ -1,27 +1,24 @@
 <script>
-	import {
-		Collapse,
-		NavbarToggler,
-		Nav,
-		Navbar,
-	} from 'sveltestrap';
+	
 
-	let isOpen = false;
-  
-	function handleUpdate(event) {
-		isOpen = event.detail.isOpen;
-	}
 </script>
 
-<Navbar expand="md" class="bg-white sticky-top shadow-sm">
-	<slot name="brand" />
-	<NavbarToggler class="border border-success text-success" on:click={() => (isOpen = !isOpen)} />
-	<Collapse {isOpen} navbar expand="md" on:update={handleUpdate}>
-		<Nav class="ms-auto d-flex align-items-center justify-content-end flex-row" navbar>
-			<slot />
-		</Nav>
-	</Collapse>
-</Navbar>
+<header class="navbar sticky-top bg-dark p-0 flex-md-nowrap" data-bs-theme="dark">
+    <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark">
+        <div class="container-fluid">
+          <slot name="brand"></slot>
+          <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
+            <span class="navbar-toggler-icon"></span>
+          </button>
+          <div class="collapse navbar-collapse justify-content-md-end" id="navbarCollapse">
+            <slot name="menu"></slot>
+            <hr class="my-3 d-md-none">
+            <slot name="footer-menu"></slot>
+            <slot name="nav-menu"></slot>
+          </div>
+        </div>
+    </nav>
+</header>
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@@ -33,11 +30,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;
@@ -642,4 +645,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Header/Header.svelte.d.ts

@@ -7,7 +7,9 @@ export default class Header extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     brand: {};
-    default: {};
+    menu: {};
+    'footer-menu': {};
+    'nav-menu': {};
 }> {
 }
 export type HeaderProps = typeof __propDef.props;
@@ -23,7 +25,9 @@ declare const __propDef: {
     };
     slots: {
         brand: {};
-        default: {};
+        menu: {};
+        'footer-menu': {};
+        'nav-menu': {};
     };
 };
 export {};

package/components/Header/HeaderDropDownLink.svelte

@@ -0,0 +1,11 @@
+<script>
+</script>
+
+<li class="nav-item dropdown">
+	<a class="nav-link " href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+		<slot name="label" />
+	</a>
+	<ul class="dropdown-menu dropdown-menu-end flex-md-column">
+		<slot />
+	</ul>
+</li>

package/components/Header/HeaderDropDownLink.svelte.d.ts

@@ -0,0 +1,29 @@
+/** @typedef {typeof __propDef.props}  HeaderDropDownLinkProps */
+/** @typedef {typeof __propDef.events}  HeaderDropDownLinkEvents */
+/** @typedef {typeof __propDef.slots}  HeaderDropDownLinkSlots */
+export default class HeaderDropDownLink extends SvelteComponentTyped<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    label: {};
+    default: {};
+}> {
+}
+export type HeaderDropDownLinkProps = typeof __propDef.props;
+export type HeaderDropDownLinkEvents = typeof __propDef.events;
+export type HeaderDropDownLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        label: {};
+        default: {};
+    };
+};
+export {};

package/components/Header/HeaderDropDownLinkItem.svelte

@@ -0,0 +1,9 @@
+<script>
+	export let link = '#';
+</script>
+
+<li>
+	<a class="dropdown-item" href={link} on:click>
+		<slot />
+	</a>
+</li>

package/components/Header/HeaderDropDownLinkItem.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  HeaderDropDownLinkItemProps */
+/** @typedef {typeof __propDef.events}  HeaderDropDownLinkItemEvents */
+/** @typedef {typeof __propDef.slots}  HeaderDropDownLinkItemSlots */
+export default class HeaderDropDownLinkItem extends SvelteComponentTyped<{
+    link?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HeaderDropDownLinkItemProps = typeof __propDef.props;
+export type HeaderDropDownLinkItemEvents = typeof __propDef.events;
+export type HeaderDropDownLinkItemSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Header/HeaderItem.svelte

@@ -32,11 +32,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;
@@ -641,4 +647,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Header/HeaderItem.svelte.d.ts

@@ -3,8 +3,8 @@
 /** @typedef {typeof __propDef.slots}  HeaderItemSlots */
 export default class HeaderItem extends SvelteComponentTyped<{
     [x: string]: any;
-    link?: string | undefined;
     type?: string | undefined;
+    link?: string | undefined;
     iconName?: string | undefined;
 }, {
     click: MouseEvent;
@@ -21,8 +21,8 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        link?: string | undefined;
         type?: string | undefined;
+        link?: string | undefined;
         iconName?: string | undefined;
     };
     events: {

package/components/Header/HeaderLink.svelte

@@ -0,0 +1,9 @@
+<script>
+    export let link="#";
+</script>
+
+<li class="nav-item">
+    <a class="nav-link" href="{link}" on:click>
+        <slot></slot>
+    </a>
+</li>

package/components/Header/HeaderLink.svelte.d.ts

@@ -0,0 +1,31 @@
+/** @typedef {typeof __propDef.props}  HeaderLinkProps */
+/** @typedef {typeof __propDef.events}  HeaderLinkEvents */
+/** @typedef {typeof __propDef.slots}  HeaderLinkSlots */
+export default class HeaderLink extends SvelteComponentTyped<{
+    link?: string | undefined;
+}, {
+    click: MouseEvent;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type HeaderLinkProps = typeof __propDef.props;
+export type HeaderLinkEvents = typeof __propDef.events;
+export type HeaderLinkSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        link?: string | undefined;
+    };
+    events: {
+        click: MouseEvent;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/Header/HeaderLinks.svelte

@@ -0,0 +1,9 @@
+<script>
+
+</script>
+
+<!--ALERTS/NOTIFICATIONS/USER PROFILE STARTS-->
+<ul class="navbar-nav ml-auto"> 
+    <slot></slot>
+</ul>
+<!--ALERTS/NOTIFICATIONS/USER PROFILE ENDS-->

package/components/Header/HeaderLinks.svelte.d.ts

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

package/components/Header/UserAvatar.svelte

@@ -12,13 +12,13 @@
 	if (result == null) userImage = defaultImage;
 </script>
 
-<NavbarBrand href="/" class="userProfile">
+<div class="userProfile">
+	<img src={userImage} alt="PROFILE" />
 	<div class="userProfileBox">
 		<p class="m-0 efs-small etext-black text-capitalize">{userName}</p>
 		<p class="m-0 efs-small text-capitalize">{userRole}</p>
 	</div>
-	<!-- <img src={userImage} alt="PROFILE" /> -->
-</NavbarBrand>
+</div>
 
 <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
 @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@@ -30,11 +30,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;
@@ -639,4 +645,7 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
+}
+:global(.bg-dark) {
+  background-color: #05445E !important;
 }</style>

package/components/Icon/ActionIcon.svelte.d.ts

@@ -3,9 +3,9 @@
 /** @typedef {typeof __propDef.slots}  ActionIconSlots */
 export default class ActionIcon extends SvelteComponentTyped<{
     [x: string]: any;
-    link?: string | undefined;
     type?: string | undefined;
     icon?: string | undefined;
+    link?: string | undefined;
 }, {
     click: MouseEvent;
 } & {
@@ -19,9 +19,9 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         [x: string]: any;
-        link?: string | undefined;
         type?: string | undefined;
         icon?: string | undefined;
+        link?: string | undefined;
     };
     events: {
         click: MouseEvent;

package/components/Layout/Content.svelte

@@ -0,0 +1,9 @@
+<script>
+</script>
+
+<div class="container-fluid" style="margin-top:80px;background-color: #EBECEF;">
+	<div class="row">
+		<slot name="sidebar-menu" />
+		<slot name="page" />
+	</div>
+</div>