IDM-IPEX-UI

JMSOFT IDM IPEX UI Components Libary
NodeJS Version v16.20.0
React v18.2.0

package v.1.2.0 standard Document - npm

Layout Components

• Container

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node |||

• Wrapper

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node |||

• Group

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | required | title | string || | optional | margin | string || | optional | groupCount | 'two', 'three' |||

• GroupRow

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | width | string, number || | optional | padding | string || | optional | justify | 'right', 'center', 'left', 'space-between' || | optional | gap | 'top', 'right', 'left', 'bottom' || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | flexWrap | boolean |||

• GroupColumn

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | width | string || | optional | height | string || | optional | align | 'left', 'center', 'right', 'space-between' || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | gap | 'right', 'left', 'top', 'bottom' || | optional | flexWrap | boolean |||

• GroupButton

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | width | number, '100%', 'auto' || | optional | justify | 'right', 'center', 'left' |||

• GroupTextLine

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | align | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | fontSize | 'small', 'large' || | optional | fontBold | boolean || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |||

• Div

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | display | string || | optional | padding | string || | optional | margin | string || | optional | width | string || | optional | height | string || | optional | column | boolean || | optional | align | 'right', 'center', 'left', 'flex-end', 'flex-start' || | optional | justify | 'right', 'center', 'left', 'space-between' || | optional | background | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | border | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | radius | number || | optional | position | 'absolute', 'relative', 'fixed' || | optional | top | number || | optional | right | number || | optional | left | number || | optional | bottom | number |||

• Modal

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | required | open | boolean || | optional | width | string || | optional | height | string || | optional | onClose | (val: boolean) => void |||

• Loading

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | open | boolean |||

Image Components

• Logo

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | width | number || | required | src | string || | optional | margin | string || | optional | padding | string || | optional | onClick | () => void |||

Text Components

• Subject

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | width | number || | optional | align | 'right', 'center', 'left' || | optional | icon | node || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |||

• TextSingle

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | text | string || | optional | width | number || | optional | height | string || | optional | align | 'right', 'center', 'left' || | optional | justify | 'flex-start', 'center', 'flex-end' || | optional | padding | string || | optional | margin | string || | optional | fontBold | boolean || | optional | fontSize | 'small', 'large' || | optional | backgroundColor | string || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | gap | 'right', 'top', 'bottom', 'left' || | optional | onClick | (val: string) => void |||

• TextDouble

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | textUpper | string || | required | textLower | string || | optional | width | number || | optional | height | string || | optional | align | 'right', 'center', 'left' || | optional | justify | 'flex-start', 'center', 'flex-end' || | optional | padding | string || | optional | margin | string || | optional | fontBold | boolean || | optional | fontSize | 'small', 'large' || | optional | backgroundColor | string || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | gap | 'right', 'top', 'bottom', 'left' || | optional | onClick | (val: { textUpper: string, textLower: string }) => void |||

• TextColorIconBox

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | text | string || | required | boxColor | string || | optional | width | number || | optional | align | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | fontBold | boolean || | optional | fontSize | 'small', 'large' || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | gap | 'right', top', 'bottom', 'left' || | optional | onClick | (val: string) => void |||

Button Components

• Button

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | text | string || | required | onClick | () => void || | optional | icon | 'add', 'remove', 'modify', 'search', 'delete', 'excel', 'listen', 'apply', 'download' || | optional | width | string || | optional | margin | string || | optional | padding | string || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | size | 'small', 'large' || | optional | gap | 'right', 'top', 'bottom', 'left' || | optional | disabled | boolean |||

Input Components

• InputText

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | value | string || | required | type | 'text', 'password', 'number' || | optional | width | 'small', 'medium', 'large', 'full', 'modal' || | optional | title | string || | optional | titleWidth | 'small', 'medium', 'large' || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | placeholder | string || | optional | disabled | string || | optional | gap | 'right', 'top', 'bottom', 'left' |||

• InputSelect

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node | OptionTag | | required | value | any || | required | items | { text: string; value: any; disalbed?: boolean; checked?: boolean }[] || | required | onChange | (val: string) => void || | optional | width | 'small', 'medium', 'large', 'full', 'modal' || | optional | title | string || | optional | titleWidth | 'small', 'medium', 'large' || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | disabled | string || | optional | gap | 'right', 'top', 'bottom', 'left' |||

• InputDate

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | value | string || | required | onChange | (val: string) => void || | required | type | 'date', 'datetime-local' || | optional | width | 'small', 'medium', 'large', 'full', 'modal' || | optional | title | string || | optional | titleWidth | 'small', 'medium', 'large' || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | disabled | string || | optional | gap | 'right', 'top', 'bottom', 'left' |||

• InputTextarea

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | value | string || | required | row | number || | required | onChange | (val: string) => void || | optional | width | 'small', 'medium', 'large', 'full', 'modal' || | optional | title | string || | optional | titleWidth | 'small', 'medium', 'large' || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | titleSelectValue | string || | optional | titleSelectItems | { text: string; value: any; disabled?: boolean; checked?: boolean }[] || | optional | titleSelectOnChange | (val: string) => void || | optional | padding | string || | optional | margin | string || | optional | disabled | string || | optional | placeholder | string || | optional | gap | 'right', 'top', 'bottom', 'left' |||

• InputCheck

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | value | { text: string; value: any; disabled?: boolean; checked?: boolean; }[] || | required | onChange | (val: { text: string; value: any; disabled?: boolean; checked?: boolean; }[]) => void || | optional | width | 'full', 'modal' || | optional | title | string || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | flexWrap | boolean || | optional | gap | 'right', 'top', 'bottom', 'left' |||

• InputRadio

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | value | any || | required | items | { text: string; value: any; disabled?: boolean; checked?: boolean; }[] || | required | onChange | (val: any) => void || | optional | width | 'small', 'medium', 'large', 'full', 'modal' || | optional | title | string || | optional | titleWidth | 'small', 'medium', 'large' || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | gap | 'right', 'top', 'bottom', 'left' |||

• InputButton

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | text | string || | required | onClick | () => void || | optional | type | 'text', 'password', 'number' || | optional | width | 'small', 'medium', 'large', 'full', 'modal' || | optional | title | string || | optional | titleWidth | 'small', 'medium', 'large' || | optional | titleColor | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' || | optional | titleCover | boolean || | optional | titleAlign | 'right', 'center', 'left' || | optional | padding | string || | optional | margin | string || | optional | disabled | boolean || | optional | icon | 'add', 'remove', 'modify', 'search', 'delete', 'excel' || | optional | gap | 'right', 'top', 'bottom', 'left' || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |||

• InputUpload

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | onChange | (val: File) => void || | required | value | File, null || | optional | padding | string || | optional | margin | string || | optional | placeholder | string |||

Table Components

• Table

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | children | node || | optional | width | number || | optional | gap | 'right', 'top', 'bottom', 'left' || | optional | pagination | boolean | pagination | | optional | paginationAllData | Array＜T> | pagination | | optional | paginationSize | 5, 10 | pagination | | optional | paginationCurrentPageData | (val: any) => void | pagination ||

• Thead

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |||

• TheadTr

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | - | - | - | - ||

• Th

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | optional | width | string |||

• Tbody

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | - | - | - | - ||

• TbodyTr

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | optional | pointer | boolean || | optional | onClick | () => void |||

• Td

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | optional | width | string || | optional | padding | number || | optional | align | 'left', 'right' |||

Chart Components

• Charts

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | labels | string[] | labels.length == datasets.length | | required | datasets | { name: string; data: number[] }[] | labels.length == datasets.length | | optional | title | string || | optional | gap | 'right', 'top', 'bottom', 'left' |||

List Components

• TransitionList

| | props | type | desc | | ------------ | ------------ | ------------ | ------------ | | required | transitionAllData | Array＜T＞ || | required | transitionCheckValueData | (val: string[]) => void || | optional | gap | 'right', 'top', 'bottom', 'left' || | optional | color | 'theme1', 'theme2', 'theme3', 'theme4', 'primary', 'secondary', 'tertiary' , 'info', 'success', 'warning', 'error', 'search' |||

Copyright 2023. JMSOFT All rights reserved.