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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -4,17 +4,27 @@ declare namespace _default {
4
4
  export const tags: string[];
5
5
  export namespace argTypes {
6
6
  namespace stayOpen {
7
- const control: string;
7
+ namespace control {
8
+ const type: string;
9
+ }
8
10
  }
9
11
  namespace items {
10
- const control_1: string;
12
+ export namespace control_1 {
13
+ const type_1: string;
14
+ export { type_1 as type };
15
+ }
11
16
  export { control_1 as control };
12
17
  }
13
18
  }
14
19
  }
15
20
  export default _default;
16
- export function Default(args: any): {
17
- Component: typeof Accordion;
18
- props: any;
19
- };
21
+ export namespace Default {
22
+ namespace args {
23
+ const items_1: {
24
+ header: string;
25
+ content: string;
26
+ }[];
27
+ export { items_1 as items };
28
+ }
29
+ }
20
30
  import Accordion from "./Accordion.svelte";
@@ -5,17 +5,15 @@ export default {
5
5
  component: Accordion,
6
6
  tags: ['autodocs'],
7
7
  argTypes: {
8
- stayOpen: { control: 'boolean' },
9
- items: { control: 'object' }
8
+ stayOpen: { control: {type:'boolean' } },
9
+ items: { control: { type: 'array' } },
10
10
  }
11
11
  };
12
12
 
13
13
 
14
14
  // story with customized items
15
- export const Default = (args) => ({
16
- Component: Accordion,
17
- props: {
18
- ...args,
15
+ export const Default ={
16
+ args:{
19
17
  items: [
20
18
  {
21
19
  header: 'Accordion Item #1',
@@ -27,4 +25,4 @@ export const Default = (args) => ({
27
25
  }
28
26
  ]
29
27
  }
30
- });
28
+ }
@@ -1,6 +1,7 @@
1
1
  declare namespace _default {
2
2
  export const title: string;
3
3
  export { Badge as component };
4
+ export const tags: string[];
4
5
  }
5
6
  export default _default;
6
7
  export namespace yellow {
@@ -2,7 +2,8 @@ import Badge from './Badge.svelte'
2
2
 
3
3
  export default{
4
4
  title:'FMS/Badge',
5
- component:Badge
5
+ component:Badge,
6
+ tags: ['autodocs'],
6
7
  };
7
8
 
8
9
  export const yellow={
@@ -1,8 +1,7 @@
1
1
  <script>import { Breadcrumb, BreadcrumbItem } from "sveltestrap";
2
- import { goto } from "$app/navigation";
3
2
  export let newBreadcrumbs;
4
3
  function handleClick(data) {
5
- goto(data.link);
4
+ navigator(data.link);
6
5
  }
7
6
  let length = newBreadcrumbs.length;
8
7
  </script>
@@ -44,6 +44,13 @@
44
44
  }
45
45
  }
46
46
 
47
+ .disabled:disabled {
48
+
49
+ opacity: 0.5;
50
+ cursor: auto;
51
+
52
+ }
53
+
47
54
  //large button
48
55
  .ebtn-large {
49
56
  height: $large-height;
@@ -674,7 +681,7 @@
674
681
  }
675
682
 
676
683
  .eoutline-successDark {
677
- outline: 1px solid $success-dark;
684
+ outline: 1px solid $success-dark ;
678
685
  }
679
686
 
680
687
  .eoutline-successLight {
@@ -4,12 +4,14 @@
4
4
  export let label = 'Button';
5
5
  export let config = '';
6
6
  export let icon = { state: false, name: 'person', position: 'right' };
7
- export let shade = 'primary';
7
+ export let shade = '';
8
8
  export let outlineShade = '';
9
+ export let size = '';
10
+ export let disabled =false;
9
11
 
10
12
  let buttonStyles = [];
11
13
  if (buttonConfig.hasOwnProperty(config)) {
12
- buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`];
14
+ buttonStyles = ['ebtn', ...buttonConfig[config], `ebg-${shade}`, `eoutline-${outlineShade}`, `ebtn-${size}`, `disabled`];
13
15
  }
14
16
 
15
17
  // icon button
@@ -25,7 +27,7 @@
25
27
  console.log(buttonStyles);
26
28
  </script>
27
29
 
28
- <button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur>
30
+ <button {type} class={buttonStyles.join(' ')} on:click on:focus on:blur {disabled} >
29
31
  <slot>
30
32
  {#if label}
31
33
  {label}
@@ -80,6 +82,10 @@
80
82
  .ebtn-medium i {
81
83
  font-size: 16px;
82
84
  }
85
+ .disabled:disabled {
86
+ opacity: 0.5;
87
+ cursor: auto;
88
+ }
83
89
  .ebtn-large {
84
90
  height: 52px;
85
91
  display: flex;
@@ -2,6 +2,7 @@
2
2
  /** @typedef {typeof __propDef.events} ButtonEvents */
3
3
  /** @typedef {typeof __propDef.slots} ButtonSlots */
4
4
  export default class Button extends SvelteComponentTyped<{
5
+ disabled?: boolean | undefined;
5
6
  type?: string | undefined;
6
7
  label?: string | undefined;
7
8
  config?: string | undefined;
@@ -12,6 +13,7 @@ export default class Button extends SvelteComponentTyped<{
12
13
  } | undefined;
13
14
  shade?: string | undefined;
14
15
  outlineShade?: string | undefined;
16
+ size?: string | undefined;
15
17
  }, {
16
18
  click: MouseEvent;
17
19
  focus: FocusEvent;
@@ -28,6 +30,7 @@ export type ButtonSlots = typeof __propDef.slots;
28
30
  import { SvelteComponentTyped } from "svelte";
29
31
  declare const __propDef: {
30
32
  props: {
33
+ disabled?: boolean | undefined;
31
34
  type?: string | undefined;
32
35
  label?: string | undefined;
33
36
  config?: string | undefined;
@@ -38,6 +41,7 @@ declare const __propDef: {
38
41
  } | undefined;
39
42
  shade?: string | undefined;
40
43
  outlineShade?: string | undefined;
44
+ size?: string | undefined;
41
45
  };
42
46
  events: {
43
47
  click: MouseEvent;
@@ -1,6 +1,7 @@
1
1
  declare namespace _default {
2
2
  export const title: string;
3
3
  export { Card as component };
4
+ export const tags: string[];
4
5
  export namespace argTypes {
5
6
  namespace image {
6
7
  const control: string;
@@ -4,6 +4,7 @@ import Card from './Card.svelte';
4
4
  export default {
5
5
  title: 'FMS/Card',
6
6
  component: Card,
7
+ tags: ['autodocs'],
7
8
  argTypes: {
8
9
  image: { control: 'text' },
9
10
  width: { control: 'text' },
@@ -5,8 +5,8 @@ export default class Checkbox extends SvelteComponentTyped<{
5
5
  disable: any;
6
6
  enable: any;
7
7
  label?: string | undefined;
8
- value?: string | undefined;
9
8
  size?: string | undefined;
9
+ value?: string | undefined;
10
10
  }, {
11
11
  [evt: string]: CustomEvent<any>;
12
12
  }, {}> {
@@ -20,8 +20,8 @@ declare const __propDef: {
20
20
  disable: any;
21
21
  enable: any;
22
22
  label?: string | undefined;
23
- value?: string | undefined;
24
23
  size?: string | undefined;
24
+ value?: string | undefined;
25
25
  };
26
26
  events: {
27
27
  [evt: string]: CustomEvent<any>;
@@ -1,6 +1,7 @@
1
1
  declare namespace _default {
2
2
  export const title: string;
3
3
  export { Modal as component };
4
+ export const tags: string[];
4
5
  export namespace argTypes {
5
6
  namespace content {
6
7
  const control: string;
@@ -22,6 +23,8 @@ export namespace Default {
22
23
  export { content_1 as content };
23
24
  const header_1: string;
24
25
  export { header_1 as header };
26
+ export const closeBtn: string;
27
+ export const saveBtn: string;
25
28
  const open_1: boolean;
26
29
  export { open_1 as open };
27
30
  }
@@ -3,6 +3,7 @@ import Modal from './Modal.svelte';
3
3
  export default {
4
4
  title: 'FMS/Modal',
5
5
  component: Modal,
6
+ tags: ['autodocs'],
6
7
  argTypes: {
7
8
  content: { control: 'text' },
8
9
  header: { control: 'text' },
@@ -14,6 +15,8 @@ export const Default = {
14
15
  args: {
15
16
  content: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
16
17
  header: 'Modal Title',
18
+ closeBtn:"Close",
19
+ saveBtn:"Save Changes",
17
20
  open: true,
18
21
  }
19
22
  };
@@ -3,7 +3,9 @@ import { Modal, ModalBody, ModalFooter, ModalHeader } from "sveltestrap";
3
3
  import Icon from "../Icon/Icon.svelte";
4
4
  export let content = "";
5
5
  export let header = "";
6
- export let open = true;
6
+ export let closeBtn = "";
7
+ export let saveBtn = "";
8
+ export let open = false;
7
9
  export let toggle = () => open = !open;
8
10
  </script>
9
11
 
@@ -38,8 +40,14 @@ export let toggle = () => open = !open;
38
40
  </div>
39
41
  </ModalBody>
40
42
  <ModalFooter>
41
- <Button config="secondaryOutlineBtnMedium" on:click={toggle}>Close</Button>
42
- <Button config="successBtnMedium" on:click={toggle}>Save changes</Button>
43
+ <slot name="footer">
44
+ {#if closeBtn || saveBtn}
45
+ <Button config="secondaryOutlineBtnMedium" on:click={toggle}>{closeBtn}</Button>
46
+ <Button config="successBtnMedium" on:click={toggle}>{saveBtn}</Button>
47
+ {:else}
48
+ <slot />
49
+ {/if}
50
+ </slot>
43
51
  </ModalFooter>
44
52
  </Modal>
45
53
  </div>
@@ -3,6 +3,8 @@ declare const __propDef: {
3
3
  props: {
4
4
  content?: string | undefined;
5
5
  header?: string | undefined;
6
+ closeBtn?: string | undefined;
7
+ saveBtn?: string | undefined;
6
8
  open?: boolean | undefined;
7
9
  toggle?: (() => boolean) | undefined;
8
10
  };
@@ -13,6 +15,7 @@ declare const __propDef: {
13
15
  header: {};
14
16
  content: {};
15
17
  default: {};
18
+ footer: {};
16
19
  };
17
20
  };
18
21
  export type ModalProps = typeof __propDef.props;
@@ -1,8 +1,32 @@
1
1
  // Importing variables from variable.scss file
2
2
  @import './../variable.scss';
3
3
 
4
+ %common-styles {
5
+ color: $white;
6
+ }
7
+
8
+ %commom-background-line {
9
+ background: $white;
10
+ }
11
+
12
+ %sidebar-styles {
13
+ background: $primary-dark;
14
+ }
15
+
16
+ %active-styles {
17
+ border-left: 2px solid $white;
18
+ background: $blue-700;
19
+ }
20
+
21
+ %common-li-styles {
22
+ display: flex;
23
+ padding: 15px 32px;
24
+ align-items: center;
25
+ gap: 8px;
26
+ }
27
+
4
28
  .row {
5
- --bs-gutter-x: -0.5rem;
29
+ --bs-gutter-x: 0rem;
6
30
  }
7
31
 
8
32
  .icon-sidebar {
@@ -10,67 +34,72 @@
10
34
  top: 0;
11
35
  left: 0;
12
36
  height: 100%;
13
- width: 60px;
14
- background-color: #fff;
37
+ width: 88px;
38
+ background: $primary-dark;
15
39
  }
16
40
 
17
- .icon-sidebar .toggleButton {
18
- display: flex;
19
- align-items: center;
20
- padding: 20px;
21
- gap: 32px;
41
+ .line {
42
+ width: 88px;
43
+ height: 1px;
44
+ @extend %commom-background-line;
45
+ }
46
+
47
+ .icon-btn {
48
+ padding: 20px 27px;
22
49
  }
23
50
 
24
- .icon-sidebar-content ul {
25
- padding: 20px;
26
- color: $primary-dark;
27
- gap: 32px;
51
+ .icon-sidebar-content .toggle-button {
52
+ @extend %common-styles;
28
53
  }
29
54
 
30
- #offcanvasScrollingLabel {
31
- color: $secondary-dark;
55
+ .icon-sidebar-content ul li {
56
+ @extend %common-styles;
57
+ @extend %common-li-styles;
58
+ padding: 16px 32px;
59
+
60
+ }
61
+
62
+ .icon-sidebar-content ul .active {
63
+ @extend %active-styles;
64
+ }
65
+
66
+ //sidbar open class
67
+
68
+ :global(.offcanvas-body) {
69
+ @extend %sidebar-styles;
70
+ padding: 0rem 0rem;
71
+ }
72
+
73
+ .offcanvas-title {
74
+ color: $white;
32
75
  font-size: 28px;
33
- font-weight: 600;
34
76
  }
35
77
 
36
78
  ul {
37
- color: $primary-dark;
38
- gap: 4px;
79
+ @extend %common-styles;
39
80
  }
40
81
 
41
82
  .nav-item {
42
- display: flex;
43
- width: 241px;
44
- padding: 15px;
45
- align-items: center;
46
- gap: 10px;
47
- border-radius: 4px;
48
- border: 1px solid $primary-dark;
83
+ @extend %common-li-styles;
49
84
  }
50
85
 
51
86
  .nav-item .item-name {
52
- color: $primary-dark;
53
- font-size: 16px;
54
- font-style: normal;
55
- font-weight: 400;
56
87
  line-height: 22px;
57
- font-family: 'Roboto';
58
88
  }
59
89
 
60
- .toggleButton {
90
+ .nav .nav-item.active {
91
+ @extend %active-styles;
92
+ }
93
+
94
+ .toggle-button {
61
95
  background-color: transparent;
62
- border: #fff;
96
+ border: $white;
63
97
  cursor: pointer;
64
98
  }
65
99
 
66
100
  .material-icons {
67
- font-size: 24px;
68
- color: $primary-dark;
69
- }
70
-
71
- :global(.offcanvas-start) {
72
- width: 274px;
73
- border-right: none;
101
+ font-size: 16px;
102
+ color: $white;
74
103
  }
75
104
 
76
105
  :global(.offcanvas.offcanvas-start) {
@@ -78,10 +107,12 @@ ul {
78
107
  border-right: none;
79
108
  }
80
109
 
81
- :global(.offcanvas-body) {
82
- padding: 0.5rem 0.5rem;
110
+ .offcanvas-header {
111
+ padding: 1.5rem 1.5rem;
83
112
  }
84
113
 
85
- .offcanvas-header {
86
- padding: 0.5rem 0.5rem;
114
+ .line-open {
115
+ width: 274px;
116
+ height: 1px;
117
+ @extend %commom-background-line;
87
118
  }
@@ -2,6 +2,7 @@ import Sidebar from "./Sidebar.svelte";
2
2
  declare const _default: {
3
3
  title: string;
4
4
  component: typeof Sidebar;
5
+ tags: string[];
5
6
  argTypes: {
6
7
  companyName: {
7
8
  control: {
@@ -16,13 +17,13 @@ declare const _default: {
16
17
  };
17
18
  };
18
19
  export default _default;
19
- export declare const Default: ({ companyName, navItems }: {
20
- companyName: any;
21
- navItems: any;
22
- }) => {
23
- Component: typeof Sidebar;
24
- props: {
25
- companyName: any;
26
- navItems: any;
20
+ export declare const Default: {
21
+ args: {
22
+ companyName: string;
23
+ navItems: {
24
+ name: string;
25
+ icon: string;
26
+ route: string;
27
+ }[];
27
28
  };
28
29
  };
@@ -2,26 +2,26 @@ import Sidebar from "./Sidebar.svelte";
2
2
  export default {
3
3
  title: 'FMS/Sidebar',
4
4
  component: Sidebar,
5
+ tags: ['autodocs'],
5
6
  argTypes: {
6
7
  companyName: { control: { type: 'text' } },
7
8
  navItems: { control: { type: 'object' } }
8
9
  }
9
10
  };
10
- const Template = ({ companyName, navItems }) => ({
11
- Component: Sidebar,
12
- props: { companyName, navItems }
13
- });
14
- export const Default = Template.bind({});
15
- Default.args = {
16
- companyName: 'Vertfarm',
17
- navItems: [
18
- { name: 'Home', icon: 'home' },
19
- { name: 'About', icon: 'person' },
20
- { name: 'Services', icon: 'settings' },
21
- { name: 'Contact', icon: 'email' },
22
- { name: 'Home', icon: 'home' },
23
- { name: 'About', icon: 'person' },
24
- { name: 'Services', icon: 'settings' },
25
- { name: 'Contact', icon: 'email' }
26
- ]
11
+ export const Default = {
12
+ args: {
13
+ companyName: 'Vertfarm',
14
+ navItems: [
15
+ { name: 'Overview', icon: 'house-fill', route: '/overview' },
16
+ { name: 'Container Types', icon: 'aspect-ratio', route: '/container-types' },
17
+ { name: 'Containers', icon: 'view-list', route: '/containers' },
18
+ { name: 'Batch Operations', icon: 'grid', route: '/batch-operations' },
19
+ { name: 'Recipe', icon: 'soundwave', route: '/recipe' },
20
+ { name: 'Work Order', icon: 'collection', route: '/work-order' },
21
+ { name: 'Protocol', icon: 'textarea', route: '/protocol' },
22
+ { name: 'Users', icon: 'people', route: '/users' },
23
+ { name: 'Packaging Configuration', icon: 'box-seam', route: '/packaging-configuration' },
24
+ { name: 'Delivery', icon: 'truck', route: '/delivery' }
25
+ ]
26
+ }
27
27
  };