@enki-tek/fms-web-components 0.0.40 → 0.0.41

package/components/Header/Header.svelte

@@ -1,57 +1,27 @@
-<script >
-    import {
-      Collapse,
-      NavbarToggler,
-      NavbarBrand,
-      Nav,
-      Navbar,
-      NavItem,
-      NavLink,
-      Icon
-    } from 'sveltestrap';
-  
-    let defaultImage = 'https://i.postimg.cc/76TBTD1g/illustration-businessman-53876-5856.avif'
-    export let userImage ='https://i.postimg.cc/QCHcWMkm/userprofile.png';  //https://i.postimg.cc/QCHcWMkm/userprofile.png - hosted image
-    export let userName = 'John Doe';
-    export let userRole = 'Administrator';
-    let isOpen = false;
-
-    const imageURLVerification = /(http(s)?:\/\/.)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/g
-    let result = userImage.match(imageURLVerification);
-    if(result == null)
-      userImage = defaultImage;
-
+<script>
+	import {
+		Collapse,
+		NavbarToggler,
+		Nav,
+		Navbar,
+	} from 'sveltestrap';
 
-    function handleUpdate(event) {
-      isOpen = event.detail.isOpen;
-    }
-  </script>
-
-  <Navbar expand="md" class='bg-white'>    <!-- container='md' - for container look -->
-    <NavbarBrand href="/" class='efs-small headerLogo' style='font-weight:300;'>
-        <img src="https://i.postimg.cc/QCTH3KJ2/logo.png" alt="ENKITEK" >
-        Farm Management System
-    </NavbarBrand>
-    <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" navbar>
-        <NavItem class='me-3'>
-          <NavLink href="#components/" class='headerIcons'><Icon name='bell'></Icon></NavLink>
-        </NavItem>
-        <NavItem class='me-3'>
-          <NavLink href="#components/" class='headerIcons'><Icon name='gear'></Icon></NavLink>
-        </NavItem>
-        <NavbarBrand href="/" class='userProfile'>
-          <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>
-      </Nav>
-    </Collapse>    
-  </Navbar>
+	let isOpen = false;
   
+	function handleUpdate(event) {
+		isOpen = event.detail.isOpen;
+	}
+</script>
+
+<Navbar expand="md" class="bg-white">
+	<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" navbar>
+			<slot />
+		</Nav>
+	</Collapse>
+</Navbar>
 
 <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");
@@ -664,4 +634,4 @@
   font-style: normal;
   font-weight: 400;
   line-height: normal;
-}</style>
+}</style>

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

@@ -2,12 +2,13 @@
 /** @typedef {typeof __propDef.events}  HeaderEvents */
 /** @typedef {typeof __propDef.slots}  HeaderSlots */
 export default class Header extends SvelteComponentTyped<{
-    userImage?: string | undefined;
-    userName?: string | undefined;
-    userRole?: string | undefined;
+    [x: string]: never;
 }, {
     [evt: string]: CustomEvent<any>;
-}, {}> {
+}, {
+    brand: {};
+    default: {};
+}> {
 }
 export type HeaderProps = typeof __propDef.props;
 export type HeaderEvents = typeof __propDef.events;
@@ -15,13 +16,14 @@ export type HeaderSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        userImage?: string | undefined;
-        userName?: string | undefined;
-        userRole?: string | undefined;
+        [x: string]: never;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
-    slots: {};
+    slots: {
+        brand: {};
+        default: {};
+    };
 };
 export {};