@enki-tek/fms-web-components 0.0.10 → 0.0.12

package/components/CardIcon/CardIcon.stories.d.ts

@@ -18,7 +18,7 @@ declare namespace _default {
             const options_1: string[];
             export { options_1 as options };
         }
-        export namespace slotPosition {
+        export namespace subtitlePosition {
             export namespace control_2 {
                 const type_2: string;
                 export { type_2 as type };

package/components/CardIcon/CardIcon.stories.js

@@ -13,7 +13,7 @@ export default {
 			control: { type: 'select' },
 			options: ['top-left', 'top-right', 'bottom-left', 'bottom-right']
 		},
-		slotPosition: {
+		subtitlePosition: {
 			control: { type: 'select' },
 			options: ['left', 'right']
 		},

package/components/CheckBox/Checkbox.svelte

@@ -13,7 +13,7 @@
 <Input
 	type="checkbox"
 	class="inp-checkbox"
-	{name}
+	name={name}
 	bsSize={size}
 	{label}
 	bind:value

package/components/ModalWindow/Modal.scss

@@ -12,22 +12,13 @@
     align-items: center;
     justify-content: flex-end;
     align-self: stretch;
-    gap: 7rem;
     height: 19px;
 }
 
 .header .title {
     font-family: $bodyFonts;
-    margin-right: 5rem;
 }
 
-.close-icon {
-    color: $black;
-    position: absolute;
-    top: 15%;
-    right: 1rem;
-    transform: translateY(-50%);
-}
 
 :global(.secondaryOutlineBtnMedium) {
     font-weight: 600;

package/components/ModalWindow/Modal.svelte

@@ -1,57 +1,14 @@
-<script>import Button from "../Button/Button.svelte";
-import { Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
-import Icon from "../Icon/Icon.svelte";
-export let content = "";
-export let header = "";
-export let closeBtn = "";
-export let saveBtn = "";
-export let open = false;
-export let toggle = () => open = !open;
-export let size = " ";
+<script>
+	import { Modal } from 'sveltestrap';
+	export let backdrop = true;
+	export let isOpen = false;
+	export let toggle;
+	export let size = ' ';
 </script>
 
-<div>
-	<Modal isOpen={open} backdrop={false} {size}>
-		<ModalHeader>
-			<div class="header">
-				<div class="title">
-					<slot name="header">
-						{#if header}
-							{header}
-						{:else}
-							<slot name="header" />
-						{/if}
-					</slot>
-				</div>
-				<!-- svelte-ignore a11y-click-events-have-key-events -->
-				<div class="close-icon" on:click={toggle}>
-					<Icon iconName="x-lg" />
-				</div>
-			</div>
-		</ModalHeader>
-		<ModalBody>
-			<div class="content">
-				<slot name="content">
-					{#if content}
-						{content}
-					{:else}
-						<slot />
-					{/if}
-				</slot>
-			</div>
-		</ModalBody>
-		<ModalFooter>
-			<slot name="footer">
-				{#if closeBtn || saveBtn}
-					<Button config="secondaryOutlineBtnMedium" on:click={toggle}>{closeBtn}</Button>
-					<Button config="successBtnMedium" on:click={toggle}>{saveBtn}</Button>
-				{:else}
-					<slot />
-				{/if}
-			</slot>
-		</ModalFooter>
-	</Modal>
-</div>
+<Modal {isOpen} {backdrop} {size} {toggle}>
+	<slot />
+</Modal>
 
 <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");
@@ -637,19 +594,10 @@ export let size = " ";
   align-items: center;
   justify-content: flex-end;
   align-self: stretch;
-  gap: 7rem;
   height: 19px;
 }
 .header .title {
   font-family: Roboto;
-  margin-right: 5rem;
-}
-.close-icon {
-  color: #000000;
-  position: absolute;
-  top: 15%;
-  right: 1rem;
-  transform: translateY(-50%);
 }
 :global(.secondaryOutlineBtnMedium) {
   font-weight: 600;

package/components/ModalWindow/Modal.svelte.d.ts

@@ -1,27 +1,33 @@
+/** @typedef {typeof __propDef.props}  ModalProps */
+/** @typedef {typeof __propDef.events}  ModalEvents */
+/** @typedef {typeof __propDef.slots}  ModalSlots */
+export default class Modal extends SvelteComponentTyped<{
+    toggle: any;
+    size?: string | undefined;
+    backdrop?: boolean | undefined;
+    isOpen?: boolean | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ModalProps = typeof __propDef.props;
+export type ModalEvents = typeof __propDef.events;
+export type ModalSlots = typeof __propDef.slots;
 import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
-        content?: string | undefined;
-        header?: string | undefined;
-        closeBtn?: string | undefined;
-        saveBtn?: string | undefined;
-        open?: boolean | undefined;
-        toggle?: (() => boolean) | undefined;
+        toggle: any;
         size?: string | undefined;
+        backdrop?: boolean | undefined;
+        isOpen?: boolean | undefined;
     };
     events: {
         [evt: string]: CustomEvent<any>;
     };
     slots: {
-        header: {};
-        content: {};
         default: {};
-        footer: {};
     };
 };
-export type ModalProps = typeof __propDef.props;
-export type ModalEvents = typeof __propDef.events;
-export type ModalSlots = typeof __propDef.slots;
-export default class Modal extends SvelteComponentTyped<ModalProps, ModalEvents, ModalSlots> {
-}
 export {};

package/components/ModalWindow/ModalBody.svelte

@@ -0,0 +1,9 @@
+<script>
+	import { ModalBody } from 'sveltestrap';
+</script>
+
+<ModalBody>
+	<div class="content">
+		<slot />
+	</div>
+</ModalBody>

package/components/ModalWindow/ModalBody.svelte.d.ts

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

package/components/ModalWindow/ModalFooter.svelte

@@ -0,0 +1,7 @@
+<script>
+	import { ModalFooter } from 'sveltestrap';
+</script>
+
+<ModalFooter>
+	<slot />
+</ModalFooter>

package/components/ModalWindow/ModalFooter.svelte.d.ts

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

package/components/ModalWindow/ModalHeader.svelte

@@ -0,0 +1,12 @@
+<script>
+	import { ModalHeader } from 'sveltestrap';
+	export let toggle;
+</script>
+
+<ModalHeader {toggle}>
+	<div class="header">
+		<div class="title">
+			<slot />
+		</div>
+	</div>
+</ModalHeader>

package/components/ModalWindow/ModalHeader.svelte.d.ts

@@ -0,0 +1,27 @@
+/** @typedef {typeof __propDef.props}  ModalHeaderProps */
+/** @typedef {typeof __propDef.events}  ModalHeaderEvents */
+/** @typedef {typeof __propDef.slots}  ModalHeaderSlots */
+export default class ModalHeader extends SvelteComponentTyped<{
+    toggle: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {
+    default: {};
+}> {
+}
+export type ModalHeaderProps = typeof __propDef.props;
+export type ModalHeaderEvents = typeof __propDef.events;
+export type ModalHeaderSlots = typeof __propDef.slots;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        toggle: any;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enki-tek/fms-web-components",
-  "version": "0.0.10",
+  "version": "0.0.12",
   "devDependencies": {
     "@storybook/addon-essentials": "^7.6.14",
     "@storybook/addon-interactions": "^7.6.14",
@@ -82,6 +82,9 @@
     "./components/ModalWindow/Modal.scss": "./components/ModalWindow/Modal.scss",
     "./components/ModalWindow/Modal.stories": "./components/ModalWindow/Modal.stories.js",
     "./components/ModalWindow/Modal.svelte": "./components/ModalWindow/Modal.svelte",
+    "./components/ModalWindow/ModalBody.svelte": "./components/ModalWindow/ModalBody.svelte",
+    "./components/ModalWindow/ModalFooter.svelte": "./components/ModalWindow/ModalFooter.svelte",
+    "./components/ModalWindow/ModalHeader.svelte": "./components/ModalWindow/ModalHeader.svelte",
     "./components/Pagination/Pagination.scss": "./components/Pagination/Pagination.scss",
     "./components/Pagination/Pagination.stories": "./components/Pagination/Pagination.stories.js",
     "./components/Pagination/Pagination.svelte": "./components/Pagination/Pagination.svelte",