@enki-tek/fms-web-components 0.1.10 → 0.1.11

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.
@@ -2,7 +2,7 @@
2
2
  <script>
3
3
  import { Chart, registerables } from 'chart.js';
4
4
  import { onDestroy, onMount } from 'svelte';
5
- import { chartOptions } from './chartOptions';
5
+ import { chartOptions, getChartData } from './chartOptions';
6
6
 
7
7
  export let data = {};
8
8
  export let label = '';
@@ -8,6 +8,10 @@
8
8
  font-family: $bodyFonts;
9
9
  min-height:14rem;
10
10
  }
11
+ .card-mini{
12
+ height: 6rem !important;
13
+ min-height: 6rem !important;
14
+ }
11
15
  .title{
12
16
  font-size: $status-card-title;
13
17
  font-weight: $title-weight;
@@ -1,12 +1,15 @@
1
1
  <script>
2
- export let className = "";
3
- </script>
4
- <div class="col-12 col-md-6 col-sm-6 col-lg-3">
5
- <div class="m-2 card {className}">
2
+ export let className = '';
3
+ export let small = false;
4
+ </script>
5
+
6
+ <div class="col-12 col-md-6 col-sm-6 col-lg-6 col-xl-3">
7
+ <div class="m-2 card {className} {small? 'card-mini':''}">
6
8
  <slot />
7
9
  </div>
8
- </div>
9
- <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
+ </div>
11
+
12
+ <style>@import url(https://fonts.googleapis.com/icon?family=Material+Icons);
10
13
  @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");
11
14
  @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");
12
15
  .card {
@@ -17,6 +20,10 @@
17
20
  font-family: Roboto;
18
21
  min-height: 14rem;
19
22
  }
23
+ .card-mini {
24
+ height: 6rem !important;
25
+ min-height: 6rem !important;
26
+ }
20
27
  .title {
21
28
  font-size: 24px;
22
29
  font-weight: 400;
@@ -40,4 +47,3 @@
40
47
  width: fit-content;
41
48
  border-radius: 0.3333333333rem;
42
49
  }</style>
43
-
@@ -3,6 +3,7 @@
3
3
  /** @typedef {typeof __propDef.slots} StatusCardSlots */
4
4
  export default class StatusCard extends SvelteComponentTyped<{
5
5
  className?: string | undefined;
6
+ small?: boolean | undefined;
6
7
  }, {
7
8
  [evt: string]: CustomEvent<any>;
8
9
  }, {
@@ -16,6 +17,7 @@ import { SvelteComponentTyped } from "svelte";
16
17
  declare const __propDef: {
17
18
  props: {
18
19
  className?: string | undefined;
20
+ small?: boolean | undefined;
19
21
  };
20
22
  events: {
21
23
  [evt: string]: CustomEvent<any>;
@@ -32,6 +32,10 @@
32
32
  font-family: Roboto;
33
33
  min-height: 14rem;
34
34
  }
35
+ .card-mini {
36
+ height: 6rem !important;
37
+ min-height: 6rem !important;
38
+ }
35
39
  .title {
36
40
  font-size: 24px;
37
41
  font-weight: 400;
@@ -0,0 +1,7 @@
1
+ <script>
2
+ export let value = '';
3
+ </script>
4
+
5
+ <div class="align-middle text-center float-end value fw-bold fs-2">
6
+ {value}
7
+ </div>
@@ -0,0 +1,23 @@
1
+ /** @typedef {typeof __propDef.props} StatusCardSubtitleProps */
2
+ /** @typedef {typeof __propDef.events} StatusCardSubtitleEvents */
3
+ /** @typedef {typeof __propDef.slots} StatusCardSubtitleSlots */
4
+ export default class StatusCardSubtitle extends SvelteComponentTyped<{
5
+ value?: string | undefined;
6
+ }, {
7
+ [evt: string]: CustomEvent<any>;
8
+ }, {}> {
9
+ }
10
+ export type StatusCardSubtitleProps = typeof __propDef.props;
11
+ export type StatusCardSubtitleEvents = typeof __propDef.events;
12
+ export type StatusCardSubtitleSlots = typeof __propDef.slots;
13
+ import { SvelteComponentTyped } from "svelte";
14
+ declare const __propDef: {
15
+ props: {
16
+ value?: string | undefined;
17
+ };
18
+ events: {
19
+ [evt: string]: CustomEvent<any>;
20
+ };
21
+ slots: {};
22
+ };
23
+ export {};
@@ -22,6 +22,10 @@
22
22
  font-family: Roboto;
23
23
  min-height: 14rem;
24
24
  }
25
+ .card-mini {
26
+ height: 6rem !important;
27
+ min-height: 6rem !important;
28
+ }
25
29
  .title {
26
30
  font-size: 24px;
27
31
  font-weight: 400;
@@ -20,15 +20,19 @@
20
20
  </script>
21
21
 
22
22
  {#key cardLength}
23
- <div class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength}">
23
+ <div
24
+ class="col-12 col-md-{cardLength * 2} col-sm-{cardLength * 2} col-lg-{cardLength < 6
25
+ ? cardLength * 2
26
+ : cardLength} col-xl-{cardLength}"
27
+ >
24
28
  <div bind:this={element}>
25
29
  <div class="m-2 card">
26
30
  <Row>
27
- <Col md=10>
31
+ <Col md="10">
28
32
  <div class="title fw-normal">{title}</div>
29
33
  </Col>
30
34
  {#if resizable}
31
- <Col md=2>
35
+ <Col md="2">
32
36
  <div class="float-end">
33
37
  <i on:click={toggleMaximize} class="material-icons"
34
38
  >{!maximized ? 'zoom_out_map' : 'zoom_in_map'}</i
package/index.d.ts CHANGED
@@ -74,5 +74,6 @@ import DoughnutChart from './components/Charts/DoughnutChart.svelte';
74
74
  import PieChart from './components/Charts/PieChart.svelte';
75
75
  import BarChart from './components/Charts/Barchart.svelte';
76
76
  import LineChart from './components/Charts/LineChart.svelte';
77
- export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
77
+ import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
78
+ export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
78
79
  export default i18nInit;
package/index.js CHANGED
@@ -75,5 +75,6 @@ import DoughnutChart from './components/Charts/DoughnutChart.svelte';
75
75
  import PieChart from './components/Charts/PieChart.svelte';
76
76
  import BarChart from './components/Charts/Barchart.svelte';
77
77
  import LineChart from './components/Charts/LineChart.svelte';
78
- export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
78
+ import StatusCardSubtitle from './components/StatusCard/StatusCardSubtitle.svelte';
79
+ export { Accordion, AccordionItem, ActionIcon, ActionIconGroup, Alert, Badge, Brand, Breadcrumb, Button, Card, CardBody, CardFooter, CardIcon, CardiconBody, CardiconSubtitle, CardiconTitle, CardLink, CardSubtitle, CardText, CardTitle, Checkbox, derivedStore, Dropdown, DropdownItem, EnkiCard, EnkiSidebar, EnkiTable, Footer, Header, HeaderItem, Icon, Layout, MainMenuHead, menuTypeStore, Modal, ModalBody, ModalFooter, ModalHeader, NavIcon, NavItem, NavLink, NotFound, Page, Pagination, RadioButton, smallMenuwidth, Switch, Tab, TableBody, TableCell, TableHead, TableHeadCell, TableRow, TextField, Toast, Tooltip, UserAvatar, HeaderDropDownLink, HeaderDropDownLinkItem, HeaderLink, HeaderLinks, Content, MenuGroup, MenuItem, SortableGrid, SideBarMenu, StatusCard, StatusCardBody, StatusCardTitle, StatusCardSubtitle, StateCard, WidgetCard, WidgetCardBody, DoughnutChart, PieChart, BarChart, LineChart, };
79
80
  export default i18nInit;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@enki-tek/fms-web-components",
3
- "version": "0.1.10",
3
+ "version": "0.1.11",
4
4
  "devDependencies": {
5
5
  "@storybook/addon-essentials": "^7.6.14",
6
6
  "@storybook/addon-interactions": "^7.6.14",
@@ -158,6 +158,7 @@
158
158
  "./components/StatusCard/StatusCard.scss": "./components/StatusCard/StatusCard.scss",
159
159
  "./components/StatusCard/StatusCard.svelte": "./components/StatusCard/StatusCard.svelte",
160
160
  "./components/StatusCard/StatusCardBody.svelte": "./components/StatusCard/StatusCardBody.svelte",
161
+ "./components/StatusCard/StatusCardSubtitle.svelte": "./components/StatusCard/StatusCardSubtitle.svelte",
161
162
  "./components/StatusCard/StatusCardTitle.svelte": "./components/StatusCard/StatusCardTitle.svelte",
162
163
  "./components/Switches/Switch.scss": "./components/Switches/Switch.scss",
163
164
  "./components/Switches/Switch.stories": "./components/Switches/Switch.stories.js",