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

package/components/WidgetCard/WidgetCard.svelte

@@ -0,0 +1,152 @@
+<script>
+	import { onMount } from 'svelte';
+	import { Col, Row } from 'sveltestrap';
+	export let title;
+	export let resizable = false;
+	export let widthOnly = true;
+	export let resizeQuotient = 2;
+	export let cardLength = 1;
+	let maximized = false;
+	let element = null;
+	const toggleMaximize = () => {
+		maximized = !maximized;
+		if (!maximized) {
+			element.style.width = element.getBoundingClientRect().width / resizeQuotient + 'px';
+			if (!widthOnly) {
+				element.style.height = element.getBoundingClientRect().height / resizeQuotient + 'px';
+			}
+
+			return;
+		}
+		element.style.width = element.getBoundingClientRect().width * resizeQuotient + 'px';
+		if (!widthOnly) {
+			element.style.height = element.getBoundingClientRect().height * resizeQuotient + 'px';
+		}
+	};
+</script>
+
+<div bind:this={element}>
+	<div class="m-2 {cardLength == 1 ? "card" : "doublecard"}">
+		<Row>
+			<Col>
+				<div class="title fw-normal">{title}</div>
+			</Col>
+			{#if resizable}
+				<Col>
+					<div class="float-end">
+						<i on:click={toggleMaximize} class="material-icons"
+							>{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
+						>
+					</div>
+				</Col>
+			{/if}
+		</Row>
+		<Row>
+			<slot />
+		</Row>
+	</div>
+</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");
+@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");
+.card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 355px;
+}
+.doublecard {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  min-height: 354px;
+  min-width: 712px;
+}
+.state-card {
+  font-family: Roboto;
+  background-color: #f8f8f8;
+  border-radius: 0.75rem;
+  padding: 1rem;
+  border-color: transparent;
+  background-color: #E9ECEF !important;
+}
+.title {
+  font-size: 20px;
+  font-weight: 400;
+}
+.full-screen {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  margin: 0;
+}
+.full-screen .card {
+  width: 100%;
+  height: 100%;
+  border-radius: 0;
+}
+.content {
+  font-size: 16px;
+}
+.status {
+  top: 10px;
+  right: 10px;
+  font-size: 12px;
+  float: left;
+}
+.completed-tag {
+  background-color: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.overdue-tag {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.progress-tag {
+  background-color: #e6be75; /* Green */
+  color: #db9833;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.statecardtitle {
+  font-weight: 400;
+  float: right;
+  width: max-content;
+}
+.subtitle {
+  float: left;
+  font-size: 16px;
+  font-weight: 400;
+  width: max-content;
+}
+.time {
+  float: right;
+  font-size: 12px;
+  color: #999;
+  width: max-content;
+}
+.activeStatus {
+  background-color: #c0e4c1; /* Green */
+  color: #4CAF50;
+  padding: 5px 10px;
+  border-radius: 5px;
+}
+.errorStatus {
+  background-color: #eba797; /* Green */
+  color: #c9443a;
+  padding: 5px 10px;
+  border-radius: 5px;
+}</style>

package/components/WidgetCard/WidgetCard.svelte.d.ts

@@ -0,0 +1,35 @@
+/** @typedef {typeof __propDef.props}  WidgetCardProps */
+/** @typedef {typeof __propDef.events}  WidgetCardEvents */
+/** @typedef {typeof __propDef.slots}  WidgetCardSlots */
+export default class WidgetCard extends SvelteComponentTyped<{
+    title: any;
+    resizable?: boolean | undefined;
+    widthOnly?: boolean | undefined;
+    resizeQuotient?: number | undefined;
+    cardLength?: number | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type WidgetCardProps = typeof __propDef.props;
+export type WidgetCardEvents = typeof __propDef.events;
+export type WidgetCardSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        title: any;
+        resizable?: boolean | undefined;
+        widthOnly?: boolean | undefined;
+        resizeQuotient?: number | undefined;
+        cardLength?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/components/WidgetCard/WidgetCardBody.svelte

@@ -0,0 +1,13 @@
+<script>
+</script>
+
+<div class="widget-card-body">
+	<slot />
+</div>
+
+<style>
+	.widget-card-body {
+		width: 100%;
+		position: relative;
+	}
+</style>

package/components/WidgetCard/WidgetCardBody.svelte.d.ts

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

package/components/common.scss

@@ -786,4 +786,8 @@
     font-style: normal;
     font-weight: 400;
     line-height: normal;
+}
+
+:global(.bg-dark) {
+    background-color: $bg-dark !important;
 }

package/components/variable.scss

@@ -40,6 +40,8 @@ $warning: #FFBA3A;
 $warning-dark: #997404;
 $warning-light: #FFF3CD;
 
+$bg-dark: #05445E;
+
 $gray-900: #212529;
 $gray-800: #343A40;
 $gray-700: #495057;
@@ -49,6 +51,7 @@ $gray-400: #CED4DA;
 $gray-300: #DEE2E6;
 $gray-200: #E9ECEF;
 $gray-100: #F8F9FA;
+$gray-1000: #F7F8F8;
 
 $green-900: #051B11;
 $green-800: #0A3622;
@@ -97,8 +100,8 @@ $blue-500: rgba(13, 110, 253, 1);
 $Title-Color: #152536;
 
 // cardicon color private
-$gray-cardicon:#444;
-$white-cardicon:#B8B8B8;
+$gray-cardicon: #444;
+$white-cardicon: #B8B8B8;
 
 $box-shadow-green: rgba(11, 235, 49, 0.25);
 //Button sizes
@@ -123,4 +126,11 @@ $highShadow: 0px 1px 16px 0px rgba(0, 0, 0, 0.10);
 
 // transition variable hover
 
-$transitionTimeHover:.3s;
+$transitionTimeHover: .3s;
+$rem: 1rem;
+$status-card-title : 24px;
+$status-card-text : 12px;
+$status-card-value : 28px;
+$widget-card-title : 20px;
+$sidebar-title : 16px;
+$title-weight: 400;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.89",
+  "version": "0.1.0",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -24,6 +24,7 @@
     "prettier-plugin-svelte": "^2.8.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "sass": "^1.80.3",
     "storybook": "^7.6.14",
     "svelte": "^3.54.0",
     "svelte-check": "^2.9.2",
@@ -38,7 +39,11 @@
   "dependencies": {
     "@vitejs/plugin-basic-ssl": "^1.0.1",
     "bootstrap": "^5.3.2",
-    "qr-scanner": "^1.4.2"
+    "chart.js": "^4.4.5",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "qr-scanner": "^1.4.2",
+    "sortablejs": "^1.15.3",
+    "svelte-chartjs": "^3.1.2"
   },
   "exports": {
     "./package.json": "./package.json",
@@ -72,6 +77,10 @@
     "./components/CardIcon/CardiconBody.svelte": "./components/CardIcon/CardiconBody.svelte",
     "./components/CardIcon/CardiconSubtitle.svelte": "./components/CardIcon/CardiconSubtitle.svelte",
     "./components/CardIcon/CardiconTitle.svelte": "./components/CardIcon/CardiconTitle.svelte",
+    "./components/Charts/Barchart.svelte": "./components/Charts/Barchart.svelte",
+    "./components/Charts/DoughnutChart.svelte": "./components/Charts/DoughnutChart.svelte",
+    "./components/Charts/LineChart.svelte": "./components/Charts/LineChart.svelte",
+    "./components/Charts/PieChart.svelte": "./components/Charts/PieChart.svelte",
     "./components/CheckBox/Checkbox.scss": "./components/CheckBox/Checkbox.scss",
     "./components/CheckBox/Checkbox.stories": "./components/CheckBox/Checkbox.stories.js",
     "./components/CheckBox/Checkbox.svelte": "./components/CheckBox/Checkbox.svelte",
@@ -103,7 +112,11 @@
     "./components/Header/Header.scss": "./components/Header/Header.scss",
     "./components/Header/Header.stories": "./components/Header/Header.stories.js",
     "./components/Header/Header.svelte": "./components/Header/Header.svelte",
+    "./components/Header/HeaderDropDownLink.svelte": "./components/Header/HeaderDropDownLink.svelte",
+    "./components/Header/HeaderDropDownLinkItem.svelte": "./components/Header/HeaderDropDownLinkItem.svelte",
     "./components/Header/HeaderItem.svelte": "./components/Header/HeaderItem.svelte",
+    "./components/Header/HeaderLink.svelte": "./components/Header/HeaderLink.svelte",
+    "./components/Header/HeaderLinks.svelte": "./components/Header/HeaderLinks.svelte",
     "./components/Header/UserAvatar.svelte": "./components/Header/UserAvatar.svelte",
     "./components/Icon/ActionIcon.svelte": "./components/Icon/ActionIcon.svelte",
     "./components/Icon/ActionInconGroup.svelte": "./components/Icon/ActionInconGroup.svelte",
@@ -111,11 +124,14 @@
     "./components/Icon/Icon.stories": "./components/Icon/Icon.stories.js",
     "./components/Icon/Icon.svelte": "./components/Icon/Icon.svelte",
     "./components/Icon/actionIcon.scss": "./components/Icon/actionIcon.scss",
+    "./components/Layout/Content.svelte": "./components/Layout/Content.svelte",
     "./components/Layout/Footer.svelte": "./components/Layout/Footer.svelte",
     "./components/Layout/LayOut.stories": "./components/Layout/LayOut.stories.js",
     "./components/Layout/LayOut.svelte": "./components/Layout/LayOut.svelte",
+    "./components/Layout/Layout.svelte": "./components/Layout/Layout.svelte",
     "./components/Layout/MainMenuHead.svelte": "./components/Layout/MainMenuHead.svelte",
     "./components/Layout/Page.svelte": "./components/Layout/Page.svelte",
+    "./components/Layout/SortableGrid.svelte": "./components/Layout/SortableGrid.svelte",
     "./components/Layout/menuStore": "./components/Layout/menuStore.js",
     "./components/ModalWindow/Modal.scss": "./components/ModalWindow/Modal.scss",
     "./components/ModalWindow/Modal.stories": "./components/ModalWindow/Modal.stories.js",
@@ -132,9 +148,16 @@
     "./components/RadioButton/RadioButton.scss": "./components/RadioButton/RadioButton.scss",
     "./components/RadioButton/RadioButton.stories": "./components/RadioButton/RadioButton.stories.js",
     "./components/RadioButton/RadioButton.svelte": "./components/RadioButton/RadioButton.svelte",
+    "./components/Sidebar/MenuGroup.svelte": "./components/Sidebar/MenuGroup.svelte",
+    "./components/Sidebar/MenuItem.svelte": "./components/Sidebar/MenuItem.svelte",
+    "./components/Sidebar/SideBarMenu.svelte": "./components/Sidebar/SideBarMenu.svelte",
     "./components/Sidebar/Sidebar.scss": "./components/Sidebar/Sidebar.scss",
     "./components/Sidebar/Sidebar.stories": "./components/Sidebar/Sidebar.stories.js",
     "./components/Sidebar/Sidebar.svelte": "./components/Sidebar/Sidebar.svelte",
+    "./components/StatusCard/StatusCard.scss": "./components/StatusCard/StatusCard.scss",
+    "./components/StatusCard/StatusCard.svelte": "./components/StatusCard/StatusCard.svelte",
+    "./components/StatusCard/StatusCardBody.svelte": "./components/StatusCard/StatusCardBody.svelte",
+    "./components/StatusCard/StatusCardTitle.svelte": "./components/StatusCard/StatusCardTitle.svelte",
     "./components/Switches/Switch.scss": "./components/Switches/Switch.scss",
     "./components/Switches/Switch.stories": "./components/Switches/Switch.stories.js",
     "./components/Switches/Switch.svelte": "./components/Switches/Switch.svelte",
@@ -154,6 +177,11 @@
     "./components/Tooltip/Tooltip.scss": "./components/Tooltip/Tooltip.scss",
     "./components/Tooltip/Tooltip.stories": "./components/Tooltip/Tooltip.stories.js",
     "./components/Tooltip/Tooltip.svelte": "./components/Tooltip/Tooltip.svelte",
+    "./components/WidgetCard/Card.scss": "./components/WidgetCard/Card.scss",
+    "./components/WidgetCard/SensorStatusCard.svelte": "./components/WidgetCard/SensorStatusCard.svelte",
+    "./components/WidgetCard/StateCard.svelte": "./components/WidgetCard/StateCard.svelte",
+    "./components/WidgetCard/WidgetCard.svelte": "./components/WidgetCard/WidgetCard.svelte",
+    "./components/WidgetCard/WidgetCardBody.svelte": "./components/WidgetCard/WidgetCardBody.svelte",
     "./components/common.scss": "./components/common.scss",
     "./components/i18n/ShiftLanguage.svelte": "./components/i18n/ShiftLanguage.svelte",
     "./components/i18n/i18n": "./components/i18n/i18n.js",