@enki-tek/fms-web-components 0.0.1 → 0.0.3

package/components/Table/Table.svelte

@@ -0,0 +1,137 @@
+<script>
+	import { Table } from 'sveltestrap';
+	import Icon from '../Icon/Icon.svelte';
+	import Button from '../Button/Button.svelte';
+	import Badge from '../Badge/Badge.svelte';
+
+	// Declare props for header and tableData
+	export let header = ['First Name', 'Last Name', 'User Name', 'Status', ];
+	export let tableData = [
+		{ 'First Name': 'Mark', 'Last Name': 'Otto', 'User Name': '@Mdo', Status: 'progress' },
+		{ 'First Name': 'Jacob', 'Last Name': 'Tornando', 'User Name': '@fat', Status: 'Active' },
+		{ 'First Name': 'Pooja', 'Last Name': 'Krishna', 'User Name': '@pooja', Status: 'waiting' }
+	];
+
+	// State to track the index of the row currently being edited
+	let editingIndex = null;
+	let editingRow = null;
+
+	// Function to start editing a row
+	function editRow(index) {
+		editingIndex = index;
+		editingRow = { ...tableData[index] }; 
+	}
+
+	// Function to save the edited row
+	function saveRow() {
+		if (editingIndex !== null) {
+			tableData[editingIndex] = editingRow;
+			editingIndex = null;
+			editingRow = null;
+		}
+	}
+	// Function to handle input change
+	function handleInputChange(event, key) {
+		editingRow[key] = event.target.value;
+	}
+
+	function deleteRow(rowToBeDeleted) {
+		tableData = tableData.filter((row) => row !== rowToBeDeleted);
+	}
+</script>
+
+<Table size="sm" class="table table-hover">
+	<thead>
+		<tr>
+			<th>#</th>
+			{#each header as columnHeading}
+				<!-- <th>{columnHeading === 'Status' ? ' ' : columnHeading}</th> -->
+                <th>
+                {#if columnHeading === "Status"}
+                  {""}
+                {:else if columnHeading ==="Action"}
+                  {""}
+                {:else}
+                   {columnHeading }   
+                {/if}  
+            </th> 
+			{/each}
+            <th>Actions</th>
+		</tr>
+	</thead>
+	<tbody>
+		{#each tableData as row, index}
+			<tr>
+				<td class="index">{index + 1}</td>
+				{#if editingIndex === index}
+					{#each header as key}
+						<td class="table-data">
+							<!-- If this row is being edited, render an input field -->
+							<input
+								type="text"
+								bind:value={editingRow[key]}
+								on:input={(event) => handleInputChange(event, key)}
+							/>
+						</td>
+					{/each}
+					<td>
+						<Button config="successBtnSmall" on:click={saveRow}>Save</Button>
+					</td>
+				{:else}
+					{#each header as key}
+						<td>
+							{#if row[key] === 'progress'}
+								<Badge config="primaryLight" label={row['Status']} />
+							{:else if row[key] === 'Active'}
+								<Badge config="secondaryLight" label={row['Status']} />
+							{:else if row[key] === 'waiting'}
+								<Badge config="yellow" label={row['Status']} />
+							{:else}
+								{row[key]}
+							{/if}
+						</td>
+					{/each}
+					<td>
+						<div class="icons">
+							<div class="icon-edit" on:click={() => editRow(index)}>
+								<Icon iconName="pencil" />
+							</div>
+							<div class="icon-trash" on:click={() => deleteRow(row)}>
+								<Icon iconName="trash" />
+							</div>
+						</div>
+					</td>
+				{/if}
+			</tr>
+		{/each}
+	</tbody>
+</Table>
+
+<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");
+@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap");
+tr .index, tbody tr td, thead tr th {
+  color: #152536;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  font-family: Roboto;
+}
+thead tr th {
+  font-size: 17px;
+}
+tbody tr td {
+  width: 12.5rem;
+  padding: 0.5rem 0.5rem 0.5625rem 0.5rem;
+  font-weight: 400;
+}
+.icons {
+  display: flex;
+  gap: 0.5rem;
+}
+.icon-edit {
+  color: rgb(13, 110, 253);
+}
+.icon-trash {
+  color: #FE4747;
+}</style>

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

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  TableProps */
+/** @typedef {typeof __propDef.events}  TableEvents */
+/** @typedef {typeof __propDef.slots}  TableSlots */
+export default class Table extends SvelteComponentTyped<{
+    header?: string[] | undefined;
+    tableData?: {
+        'First Name': string;
+        'Last Name': string;
+        'User Name': string;
+        Status: string;
+    }[] | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TableProps = typeof __propDef.props;
+export type TableEvents = typeof __propDef.events;
+export type TableSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        header?: string[] | undefined;
+        tableData?: {
+            'First Name': string;
+            'Last Name': string;
+            'User Name': string;
+            Status: string;
+        }[] | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

package/components/Tooltip/Tooltip.scss

@@ -0,0 +1,29 @@
+@import './../variable.scss';
+@import './../common.scss';
+
+.label {
+    @extend %efs-normal;
+    color: $white;
+    font-size: 16px;
+    line-height: 22px;
+}
+
+:global(.tooltip-inner) {
+    background-color: $primary-dark;
+}
+
+:global(.bs-tooltip-end .tooltip-arrow::before) {
+    border-right-color: $primary-dark;
+}
+
+:global(.tooltip.bs-tooltip-start .tooltip-arrow::before) {
+    border-left-color: $primary-dark;
+}
+
+:global(.tooltip.bs-tooltip-top .tooltip-arrow::before) {
+    border-top-color: $primary-dark;
+}
+
+:global(.tooltip.bs-tooltip-bottom .tooltip-arrow::before) {
+    border-bottom-color: $primary-dark;
+}

package/components/Tooltip/Tooltip.stories.d.ts

@@ -0,0 +1,40 @@
+declare namespace _default {
+    export const title: string;
+    export { Tooltip as component };
+    export const tags: string[];
+    export namespace argTypes {
+        namespace placement {
+            namespace control {
+                const type: string;
+            }
+            const options: string[];
+        }
+        namespace target {
+            export namespace control_1 {
+                const type_1: string;
+                export { type_1 as type };
+            }
+            export { control_1 as control };
+        }
+        namespace dealy {
+            export namespace control_2 {
+                const type_2: string;
+                export { type_2 as type };
+            }
+            export { control_2 as control };
+        }
+    }
+}
+export default _default;
+export namespace Default {
+    namespace args {
+        const placement_1: string;
+        export { placement_1 as placement };
+        const target_1: string;
+        export { target_1 as target };
+        const dealy_1: number;
+        export { dealy_1 as dealy };
+        export const label: string;
+    }
+}
+import Tooltip from "./Tooltip.svelte";

package/components/Tooltip/Tooltip.stories.js

@@ -0,0 +1,24 @@
+import Tooltip from "./Tooltip.svelte";
+
+export default {
+    title: 'FMS/Tooltip',
+    component: Tooltip,
+    tags: ['autodocs'],
+    argTypes: {
+        placement: {
+            control: { type: 'select' },
+            options: ['right', 'left', 'top', 'bottom']
+        },
+        target: { control: { type: 'text' } },
+        dealy: { control: { type: 'number' } },
+    }
+}
+
+export const Default = {
+    args: {
+        placement: 'right',
+        target: 'btn-right-html',
+        dealy: 500,
+        label:"Tooltip to Display"
+    }
+}