@inceptionbg/iui 2.0.11 → 2.0.12
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.
- package/dist/icons/index.d.ts +5 -1
- package/dist/icons/index.js +1 -1
- package/dist/index.d.ts +151 -80
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/dist/iui.css +1 -1
- package/package.json +1 -1
- package/src/assets/icons/duotone/faCircleUser.ts +6 -6
- package/src/assets/icons/index.ts +2 -0
- package/src/assets/icons/light/faArrowDownShortWide.ts +1 -1
- package/src/assets/icons/light/faArrowDownWideShort.ts +1 -1
- package/src/assets/icons/light/faArrowUpArrowDown.ts +5 -5
- package/src/assets/icons/light/faArrowUpRightFromSquare.ts +1 -1
- package/src/assets/icons/light/faArrowsToLine.ts +1 -1
- package/src/assets/icons/light/faArrowsUpDown.ts +1 -1
- package/src/assets/icons/light/faBookmark.ts +15 -0
- package/src/assets/icons/light/faBookmarkSlash.ts +15 -0
- package/src/assets/icons/light/faCalendarPlus.ts +5 -5
- package/src/assets/icons/light/faCheck.ts +1 -1
- package/src/assets/icons/light/faChevronDown.ts +5 -5
- package/src/assets/icons/light/faChevronRight.ts +5 -5
- package/src/assets/icons/light/faCircleInfo.ts +5 -5
- package/src/assets/icons/light/faCircleXmark.ts +5 -5
- package/src/assets/icons/light/faClipboardCheck.ts +5 -5
- package/src/assets/icons/light/faClockRotateLeft.ts +1 -1
- package/src/assets/icons/light/faEllipsisVertical.ts +1 -1
- package/src/assets/icons/light/faEye.ts +5 -5
- package/src/assets/icons/light/faEyeSlash.ts +5 -5
- package/src/assets/icons/light/faFilter.ts +5 -5
- package/src/assets/icons/light/faGear.ts +1 -1
- package/src/assets/icons/light/faHouse.ts +5 -5
- package/src/assets/icons/light/faIdBadge.ts +5 -5
- package/src/assets/icons/light/faLineColumns.ts +5 -5
- package/src/assets/icons/light/faLink.ts +1 -1
- package/src/assets/icons/light/faMagnifyingGlass.ts +5 -5
- package/src/assets/icons/light/faPen.ts +5 -5
- package/src/assets/icons/light/faPrint.ts +5 -5
- package/src/assets/icons/light/faQuestion.ts +5 -5
- package/src/assets/icons/light/faRotateRight.ts +5 -5
- package/src/assets/icons/light/faTrashCan.ts +5 -5
- package/src/assets/icons/light/faTriangleExclamation.ts +5 -5
- package/src/assets/icons/light/faXmark.ts +1 -1
- package/src/assets/icons/regular/faArrowLeft.ts +6 -6
- package/src/assets/icons/regular/faArrowRightArrowLeft.ts +1 -1
- package/src/assets/icons/regular/faCircleCheck.ts +1 -1
- package/src/assets/icons/regular/faCircleExclamation.ts +1 -1
- package/src/assets/icons/regular/faCircleInfo.ts +1 -1
- package/src/assets/icons/regular/faFileArrowDown.ts +1 -1
- package/src/assets/icons/regular/faFilterCircleXmark.ts +1 -1
- package/src/assets/icons/regular/faTriangleExclamation.ts +1 -1
- package/src/assets/icons/solid/faAngleLeft.ts +1 -1
- package/src/assets/icons/solid/faAngleRight.ts +1 -1
- package/src/assets/icons/solid/faArrowDownWideShort.ts +1 -1
- package/src/assets/icons/solid/faCaretDown.ts +1 -1
- package/src/assets/icons/solid/faCheck.ts +5 -5
- package/src/assets/icons/solid/faEllipsisVertical.ts +1 -1
- package/src/assets/icons/solid/faFilter.ts +1 -1
- package/src/assets/icons/solid/faFloppyDisk.ts +1 -1
- package/src/assets/icons/solid/faGripDotsVertical.ts +1 -1
- package/src/assets/icons/solid/faListUl.ts +1 -1
- package/src/assets/icons/solid/faMinus.ts +6 -6
- package/src/assets/icons/solid/faPlus.ts +6 -6
- package/src/assets/icons/solid/faPrint.ts +1 -1
- package/src/assets/icons/solid/faRotateRight.ts +1 -1
- package/src/assets/icons/solid/faXmark.ts +1 -1
- package/src/components/Button/Button.tsx +1 -1
- package/src/components/Button/IconButton.tsx +1 -1
- package/src/components/Dashboard/FastLinksWidget/FastLinksWidget.tsx +1 -1
- package/src/components/Dialog/components/DialogFooter.tsx +1 -1
- package/src/components/Header/Components/ModuleSelect.tsx +14 -6
- package/src/components/Inputs/InputWrapper.tsx +1 -1
- package/src/components/Inputs/TextInput.tsx +1 -1
- package/src/components/List/List.tsx +18 -0
- package/src/components/List/ListItem.tsx +24 -0
- package/src/components/Loader/ProgressBar.tsx +41 -0
- package/src/components/Menu/Menu.tsx +0 -3
- package/src/components/Menu/MenuItem.tsx +21 -23
- package/src/components/Menu/NewMenu.tsx +0 -3
- package/src/components/Pullover/Pullover.tsx +5 -4
- package/src/components/Sidebar/types/ISidebar.ts +1 -1
- package/src/components/Table/Table.tsx +18 -11
- package/src/components/Table/components/filters/TableFilters.tsx +3 -6
- package/src/components/Table/components/footer/TableFooter.tsx +6 -10
- package/src/components/Table/components/header/TableHeader.tsx +22 -24
- package/src/components/Table/components/header/TableHeaderRow.tsx +16 -7
- package/{idea/Table/Components/Print → src/components/Table/components/print}/TablePrint.tsx +89 -96
- package/src/components/Table/components/sort/TableSort.tsx +2 -0
- package/src/components/Table/components/templates/TableTemplates.tsx +81 -0
- package/src/components/Table/hooks/useTablePrint.ts +75 -0
- package/src/index.ts +8 -0
- package/src/styles/App.scss +2 -0
- package/src/styles/common/_animations.scss +8 -14
- package/src/styles/common/helpers/_base.scss +0 -4
- package/src/styles/components/_header.scss +21 -9
- package/src/styles/components/_list.scss +40 -0
- package/src/styles/components/_loader.scss +3 -1
- package/src/styles/components/_menu.scss +19 -18
- package/src/styles/components/_print.scss +36 -46
- package/src/styles/components/_progressBar.scss +83 -0
- package/src/styles/components/_table.scss +16 -22
- package/src/types/ITable.ts +55 -32
- package/src/utils/i18n/i18nIUICyrilic.ts +2 -1
- package/src/utils/i18n/i18nIUILatin.ts +16 -12
- package/src/utils/i18n/i18nIUIMe.ts +2 -1
- package/src/utils/icons.ts +1 -1
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'id-badge';
|
|
5
5
|
const width = 384;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f2c1';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M320 0H64C28.65 0 0 28.65 0 64v384c0 35.35 28.65 64 64 64h256c35.35 0 64-28.65 64-64V64C384 28.65 355.3 0 320 0zM352 448c0 17.64-14.36 32-32 32H64c-17.64 0-32-14.36-32-32V64c0-17.64 14.36-32 32-32h256c17.64 0 32 14.36 32 32V448zM192 288c35.35 0 64-28.65 64-64s-28.65-64-64-64S128 188.7 128 224S156.7 288 192 288zM192 192c17.64 0 32 14.36 32 32s-14.36 32-32 32S160 241.6 160 224S174.4 192 192 192zM224 320H160c-44.18 0-80 35.82-80 80C80 408.8 87.16 416 96 416c8.838 0 16-7.164 16-16C112 373.5 133.5 352 160 352h64c26.51 0 48 21.49 48 48c0 8.836 7.164 16 16 16c8.838 0 16-7.164 16-16C304 355.8 268.2 320 224 320zM144 96h96C248.8 96 256 88.84 256 80S248.8 64 240 64h-96C135.2 64 128 71.16 128 80S135.2 96 144 96z';
|
|
10
10
|
|
|
11
11
|
export const faIdBadge: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'line-columns';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f870';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M208 48C216.8 48 224 55.16 224 64C224 72.84 216.8 80 208 80H16C7.164 80 0 72.84 0 64C0 55.16 7.164 48 16 48H208zM208 176C216.8 176 224 183.2 224 192C224 200.8 216.8 208 208 208H16C7.164 208 0 200.8 0 192C0 183.2 7.164 176 16 176H208zM0 320C0 311.2 7.164 304 16 304H208C216.8 304 224 311.2 224 320C224 328.8 216.8 336 208 336H16C7.164 336 0 328.8 0 320zM208 432C216.8 432 224 439.2 224 448C224 456.8 216.8 464 208 464H16C7.164 464 0 456.8 0 448C0 439.2 7.164 432 16 432H208zM288 192C288 183.2 295.2 176 304 176H496C504.8 176 512 183.2 512 192C512 200.8 504.8 208 496 208H304C295.2 208 288 200.8 288 192zM496 48C504.8 48 512 55.16 512 64C512 72.84 504.8 80 496 80H304C295.2 80 288 72.84 288 64C288 55.16 295.2 48 304 48H496zM288 320C288 311.2 295.2 304 304 304H496C504.8 304 512 311.2 512 320C512 328.8 504.8 336 496 336H304C295.2 336 288 328.8 288 320zM496 432C504.8 432 512 439.2 512 448C512 456.8 504.8 464 496 464H304C295.2 464 288 456.8 288 448C288 439.2 295.2 432 304 432H496z';
|
|
10
10
|
|
|
11
11
|
export const faLineColumns: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'magnifying-glass';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f002';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M507.3 484.7l-141.5-141.5C397 306.8 415.1 259.7 415.1 208c0-114.9-93.13-208-208-208S-.0002 93.13-.0002 208S93.12 416 207.1 416c51.68 0 98.85-18.96 135.2-50.15l141.5 141.5C487.8 510.4 491.9 512 496 512s8.188-1.562 11.31-4.688C513.6 501.1 513.6 490.9 507.3 484.7zM208 384C110.1 384 32 305 32 208S110.1 32 208 32S384 110.1 384 208S305 384 208 384z';
|
|
10
10
|
|
|
11
11
|
export const faMagnifyingGlass: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'pen';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f304';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M493.2 56.26l-37.51-37.51C443.2 6.252 426.8 0 410.5 0c-16.38 0-32.76 6.25-45.26 18.75L45.11 338.9c-8.568 8.566-14.53 19.39-17.18 31.21l-27.61 122.8C-1.7 502.1 6.158 512 15.95 512c1.047 0 2.116-.1034 3.198-.3202c0 0 84.61-17.95 122.8-26.93c11.54-2.717 21.87-8.523 30.25-16.9l321.2-321.2C518.3 121.7 518.2 81.26 493.2 56.26zM149.5 445.2c-4.219 4.219-9.252 7.039-14.96 8.383c-24.68 5.811-69.64 15.55-97.46 21.52l22.04-98.01c1.332-5.918 4.303-11.31 8.594-15.6l247.6-247.6l82.76 82.76L149.5 445.2zM470.7 124l-50.03 50.02l-82.76-82.76l49.93-49.93C393.9 35.33 401.9 32 410.5 32s16.58 3.33 22.63 9.375l37.51 37.51C483.1 91.37 483.1 111.6 470.7 124z';
|
|
10
10
|
|
|
11
11
|
export const faPen: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'print';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f02f';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M416 320H96c-17.67 0-32 14.33-32 32v128c0 17.67 14.33 32 32 32h320c17.67 0 32-14.33 32-32v-128C448 334.3 433.7 320 416 320zM416 480H96v-128h320V480zM448 192V70.63C448 62.14 444.6 54 438.6 48l-38.63-38.63C393.1 3.37 385.9 0 377.4 0H128C92.65 0 64 28.65 64 64v128C28.7 192 0 220.7 0 256v112C0 376.8 7.156 384 16 384S32 376.8 32 368V256c0-17.67 14.33-32 32-32h384c17.67 0 32 14.33 32 32v112c0 8.844 7.156 16 16 16s16-7.156 16-16V256C512 220.7 483.3 192 448 192zM416 192H96V64c0-17.67 14.33-32 32-32h249.4L416 70.63V192zM432 248c-13.25 0-24 10.74-24 24c0 13.25 10.75 24 24 24s24-10.75 24-24C456 258.7 445.3 248 432 248z';
|
|
10
10
|
|
|
11
11
|
export const faPrint: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'question';
|
|
5
5
|
const width = 320;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = '3f';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M213.1 32H106.7C47.84 32 0 79.84 0 138.7V160c0 8.844 7.156 16 16 16S32 168.9 32 160V138.7C32 97.48 65.5 64 106.7 64h106.5C254.4 64 288 97.58 288 138.9c0 27-14.62 52-38.16 65.25L152.5 258.9C137.4 267.4 128 283.4 128 300.7V336c0 8.844 7.156 16.01 16 16.01S160 344.8 160 336V300.7c0-5.766 3.125-11.11 8.156-13.95l97.38-54.78C299.1 213.1 320 177.4 320 138.9C320 79.94 272.1 32 213.1 32zM144 400c-17.67 0-32 14.32-32 31.99s14.33 32 32 32s32-14.33 32-32S161.7 400 144 400z';
|
|
10
10
|
|
|
11
11
|
export const faQuestion: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'rotate-right';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f2f9';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M32.05 256.1c0 123.5 100.4 223.9 223.9 223.9c104.4 0 180-76.8 180-95.94c0-9.377-7.705-16.03-15.98-16.03C399.5 367.1 369.3 448 256 448c-105.9 0-192-86.13-192-192s86.13-192 192-192c75.11 0 123.1 44.4 124.2 45.15l-55.54 55.54c-3.055 3.055-4.681 7.16-4.681 11.33C320 184.9 327.2 192 336 192h128C472.8 192 480 184.8 480 176v-128c0-8.606-6.901-15.97-15.97-15.97c-4.171 0-8.291 1.598-11.35 4.653L402.1 87.32c-8.646-13.15-70.2-55.25-146.1-55.25C132.4 32.07 32.05 132.6 32.05 256.1zM374.6 160L448 86.63V160H374.6z';
|
|
10
10
|
|
|
11
11
|
export const faRotateRight: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'trash-can';
|
|
5
5
|
const width = 448;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f2ed';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M432 64h-96l-33.63-44.75C293.4 7.125 279.1 0 264 0h-80C168.9 0 154.6 7.125 145.6 19.25L112 64h-96C7.201 64 0 71.2 0 80c0 8.799 7.201 16 16 16h416c8.801 0 16-7.201 16-16C448 71.2 440.8 64 432 64zM152 64l19.25-25.62C174.3 34.38 179 32 184 32h80c5 0 9.75 2.375 12.75 6.375L296 64H152zM400 128C391.2 128 384 135.2 384 144v288c0 26.47-21.53 48-48 48h-224C85.53 480 64 458.5 64 432v-288C64 135.2 56.84 128 48 128S32 135.2 32 144v288C32 476.1 67.89 512 112 512h224c44.11 0 80-35.89 80-80v-288C416 135.2 408.8 128 400 128zM144 416V192c0-8.844-7.156-16-16-16S112 183.2 112 192v224c0 8.844 7.156 16 16 16S144 424.8 144 416zM240 416V192c0-8.844-7.156-16-16-16S208 183.2 208 192v224c0 8.844 7.156 16 16 16S240 424.8 240 416zM336 416V192c0-8.844-7.156-16-16-16S304 183.2 304 192v224c0 8.844 7.156 16 16 16S336 424.8 336 416z';
|
|
10
10
|
|
|
11
11
|
export const faTrashCan: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fal';
|
|
4
|
+
const iconName = 'triangle-exclamation';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f071';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M256 360c-13.25 0-23.1 10.74-23.1 24c0 13.25 10.75 24 23.1 24c13.25 0 23.1-10.75 23.1-24C280 370.7 269.3 360 256 360zM256 320c8.843 0 15.1-7.156 15.1-16V160c0-8.844-7.155-16-15.1-16S240 151.2 240 160v144C240 312.8 247.2 320 256 320zM504.3 397.3L304.5 59.38C294.4 42.27 276.2 32.03 256 32C235.8 32 217.7 42.22 207.5 59.36l-199.9 338c-10.05 16.97-10.2 37.34-.4218 54.5C17.29 469.5 35.55 480 56.1 480h399.9c20.51 0 38.75-10.53 48.81-28.17C514.6 434.7 514.4 414.3 504.3 397.3zM476.1 435.1C472.7 443.5 464.8 448 455.1 448H56.1c-8.906 0-16.78-4.484-21.08-12c-4.078-7.156-4.015-15.3 .1562-22.36L235.1 75.66C239.4 68.36 247.2 64 256 64c0 0-.0156 0 0 0c8.765 .0156 16.56 4.359 20.86 11.64l199.9 338C480.1 420.7 481.1 428.8 476.1 435.1z';
|
|
10
10
|
|
|
11
11
|
export const faTriangleExclamation: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'far';
|
|
4
|
+
const iconName = 'arrow-left';
|
|
5
5
|
const width = 448;
|
|
6
|
-
const height = 512;
|
|
7
|
-
const unicode =
|
|
6
|
+
const height = 512;
|
|
7
|
+
const unicode = 'f060';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M447.1 256c0 13.25-10.76 24.01-24.01 24.01H83.9l132.7 126.6c9.625 9.156 9.969 24.41 .8125 33.94c-9.156 9.594-24.34 9.938-33.94 .8125l-176-168C2.695 268.9 .0078 262.6 .0078 256S2.695 243.2 7.445 238.6l176-168C193 61.51 208.2 61.85 217.4 71.45c9.156 9.5 8.812 24.75-.8125 33.94l-132.7 126.6h340.1C437.2 232 447.1 242.8 447.1 256z';
|
|
10
10
|
|
|
11
11
|
export const faArrowLeft: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fas';
|
|
4
|
+
const iconName = 'check';
|
|
5
5
|
const width = 512;
|
|
6
6
|
const height = 512;
|
|
7
|
-
const unicode =
|
|
7
|
+
const unicode = 'f00c';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M480 128c0 8.188-3.125 16.38-9.375 22.62l-256 256C208.4 412.9 200.2 416 192 416s-16.38-3.125-22.62-9.375l-128-128C35.13 272.4 32 264.2 32 256c0-18.28 14.95-32 32-32c8.188 0 16.38 3.125 22.62 9.375L192 338.8l233.4-233.4C431.6 99.13 439.8 96 448 96C465.1 96 480 109.7 480 128z';
|
|
10
10
|
|
|
11
11
|
export const faCheck: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fas';
|
|
4
|
+
const iconName = 'minus';
|
|
5
5
|
const width = 448;
|
|
6
|
-
const height = 512;
|
|
7
|
-
const unicode =
|
|
6
|
+
const height = 512;
|
|
7
|
+
const unicode = 'f068';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M400 288h-352c-17.69 0-32-14.32-32-32.01s14.31-31.99 32-31.99h352c17.69 0 32 14.3 32 31.99S417.7 288 400 288z';
|
|
10
10
|
|
|
11
11
|
export const faMinus: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { IconDefinition } from
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
|
|
3
|
-
const prefix =
|
|
4
|
-
const iconName =
|
|
3
|
+
const prefix = 'fas';
|
|
4
|
+
const iconName = 'plus';
|
|
5
5
|
const width = 448;
|
|
6
|
-
const height = 512;
|
|
7
|
-
const unicode =
|
|
6
|
+
const height = 512;
|
|
7
|
+
const unicode = '2b';
|
|
8
8
|
const svgPathData =
|
|
9
|
-
|
|
9
|
+
'M432 256c0 17.69-14.33 32.01-32 32.01H256v144c0 17.69-14.33 31.99-32 31.99s-32-14.3-32-31.99v-144H48c-17.67 0-32-14.32-32-32.01s14.33-31.99 32-31.99H192v-144c0-17.69 14.33-32.01 32-32.01s32 14.32 32 32.01v144h144C417.7 224 432 238.3 432 256z';
|
|
10
10
|
|
|
11
11
|
export const faPlus: IconDefinition = {
|
|
12
12
|
prefix,
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
4
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
5
5
|
|
|
6
6
|
export type IButtonColor = 'primary' | 'neutral' | 'danger';
|
|
7
7
|
export type IButtonVariant = 'solid' | 'outlined' | 'simple';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { ButtonHTMLAttributes, FC, MouseEventHandler, Ref } from 'react';
|
|
2
2
|
import clsx from 'clsx';
|
|
3
3
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
4
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
4
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
5
5
|
import { IButtonColor, IButtonVariant } from './Button';
|
|
6
6
|
import { Tooltip } from '../Tooltip/Tooltip';
|
|
7
7
|
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import type { FC } from 'react';
|
|
2
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
3
3
|
import { useTranslation } from 'react-i18next';
|
|
4
4
|
import { DashboardWidget } from '../DashboardWidget';
|
|
5
5
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
import type { ButtonHTMLAttributes, FC } from 'react';
|
|
3
3
|
import { Button, IButtonColor } from '../../Button/Button';
|
|
4
4
|
import { useTranslation } from 'react-i18next';
|
|
@@ -2,7 +2,7 @@ import { FC } from 'react';
|
|
|
2
2
|
import { Link } from 'react-router';
|
|
3
3
|
import { Menu } from '../../Menu/Menu';
|
|
4
4
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
5
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
5
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
6
6
|
import { useIsMenuOpen } from '../../../hooks/useIsMenuOpen';
|
|
7
7
|
|
|
8
8
|
interface Props {
|
|
@@ -19,7 +19,6 @@ export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
|
|
|
19
19
|
<Menu
|
|
20
20
|
isOpen={isMenuOpen}
|
|
21
21
|
onClose={onMenuClose}
|
|
22
|
-
// id="headerModuleSelect"
|
|
23
22
|
renderButton={ref => (
|
|
24
23
|
<button ref={ref} className="header-button clickable" onClick={onMenuOpen}>
|
|
25
24
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
|
|
@@ -36,10 +35,19 @@ export const ModuleSelect: FC<Props> = ({ modules, activeModule }) => {
|
|
|
36
35
|
</svg>
|
|
37
36
|
</button>
|
|
38
37
|
)}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
38
|
+
className="modules-menu"
|
|
39
|
+
>
|
|
40
|
+
{modules.map(e => (
|
|
41
|
+
<Link to={e.url} key={e.name}>
|
|
42
|
+
<div className="module-item clickable hover-neutral">
|
|
43
|
+
<div className="menu-item-icon">
|
|
44
|
+
<FontAwesomeIcon icon={e.icon} />
|
|
45
|
+
</div>
|
|
46
|
+
<p className="menu-item-label">{e.name}</p>
|
|
47
|
+
</div>
|
|
48
|
+
</Link>
|
|
49
|
+
))}
|
|
50
|
+
</Menu>
|
|
43
51
|
)}
|
|
44
52
|
|
|
45
53
|
{activeModule && (
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { FC, ReactNode, Ref } from 'react';
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
1
|
+
import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
|
|
2
2
|
import { FC, FocusEventHandler, InputHTMLAttributes, Ref, useState } from 'react';
|
|
3
3
|
import { InputWrapper } from './InputWrapper';
|
|
4
4
|
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
import type { FC } from 'react';
|
|
2
|
+
import { IListItem, ListItem } from './ListItem';
|
|
3
|
+
|
|
4
|
+
interface Props {
|
|
5
|
+
items: IListItem[];
|
|
6
|
+
}
|
|
7
|
+
|
|
8
|
+
export const List: FC<Props> = ({ items }) => {
|
|
9
|
+
if (items.length === 0) return null;
|
|
10
|
+
|
|
11
|
+
return (
|
|
12
|
+
<div className="iui-list">
|
|
13
|
+
{items.map(item => (
|
|
14
|
+
<ListItem key={item.id ?? item.label} {...item} />
|
|
15
|
+
))}
|
|
16
|
+
</div>
|
|
17
|
+
);
|
|
18
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import type { FC } from 'react';
|
|
3
|
+
|
|
4
|
+
export interface IListItem {
|
|
5
|
+
id?: string;
|
|
6
|
+
label: string;
|
|
7
|
+
desc?: string;
|
|
8
|
+
onClick?: () => void;
|
|
9
|
+
active?: boolean;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
export const ListItem: FC<IListItem> = ({ label, desc, onClick, active, disabled }) => (
|
|
14
|
+
<div
|
|
15
|
+
className={clsx('iui-list-item', { active, disabled })}
|
|
16
|
+
onClick={e => {
|
|
17
|
+
e.stopPropagation();
|
|
18
|
+
onClick?.();
|
|
19
|
+
}}
|
|
20
|
+
>
|
|
21
|
+
<p className="bold">{label}</p>
|
|
22
|
+
{desc && <div className="iui-list-item-desc">{desc}</div>}
|
|
23
|
+
</div>
|
|
24
|
+
);
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import clsx from 'clsx';
|
|
2
|
+
import type { CSSProperties, FC } from 'react';
|
|
3
|
+
import { useTranslation } from 'react-i18next';
|
|
4
|
+
|
|
5
|
+
interface Props {
|
|
6
|
+
progress?: number;
|
|
7
|
+
label?: string;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
export const ProgressBar: FC<Props> = ({ progress, label }) => {
|
|
11
|
+
const { t } = useTranslation();
|
|
12
|
+
|
|
13
|
+
if (progress === undefined) return null;
|
|
14
|
+
|
|
15
|
+
const now = Math.round(Math.min(Math.max(progress, 0), 100)); // Ensure percentage is between 0 and 100
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<div className="progress-bar-container">
|
|
19
|
+
<div className="progress-label">{label ?? t('LoadingProgress')}</div>
|
|
20
|
+
<div
|
|
21
|
+
className="progress-bar-bg"
|
|
22
|
+
role="progressbar"
|
|
23
|
+
aria-valuemin={0}
|
|
24
|
+
aria-valuemax={100}
|
|
25
|
+
aria-valuenow={now}
|
|
26
|
+
style={
|
|
27
|
+
{
|
|
28
|
+
'--progress-clip': `${now}%`,
|
|
29
|
+
'--progress-text': `'${now}%'`,
|
|
30
|
+
} as CSSProperties
|
|
31
|
+
}
|
|
32
|
+
>
|
|
33
|
+
<div
|
|
34
|
+
className={clsx('progress-bar-fill', { loading: now < 100 })}
|
|
35
|
+
style={{ width: `${now}%` }}
|
|
36
|
+
/>
|
|
37
|
+
<span className="progress-bar-text">{now}%</span>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
);
|
|
41
|
+
};
|
|
@@ -15,7 +15,6 @@ interface Props {
|
|
|
15
15
|
placement?: IMenuPlacement;
|
|
16
16
|
size?: 's' | 'm' | 'l';
|
|
17
17
|
className?: string;
|
|
18
|
-
classNameItem?: string;
|
|
19
18
|
children?: ReactNode;
|
|
20
19
|
}
|
|
21
20
|
|
|
@@ -27,7 +26,6 @@ export const Menu: FC<Props> = ({
|
|
|
27
26
|
placement = 'bottom-left',
|
|
28
27
|
size,
|
|
29
28
|
className,
|
|
30
|
-
classNameItem,
|
|
31
29
|
children,
|
|
32
30
|
}) => {
|
|
33
31
|
const menuRef = useRef<HTMLDivElement>(null);
|
|
@@ -58,7 +56,6 @@ export const Menu: FC<Props> = ({
|
|
|
58
56
|
<MenuItem
|
|
59
57
|
{...item}
|
|
60
58
|
key={item.label}
|
|
61
|
-
className={classNameItem}
|
|
62
59
|
onClick={e => {
|
|
63
60
|
item.onClick?.(e);
|
|
64
61
|
!item.keepOpen && onClose();
|