@xaypay/tui 0.0.45 → 0.0.47

package/src/components/modal/index.js

@@ -17,32 +17,32 @@ export const Modal = ({
     const classProps = classnames(styles.modal, className);
     const [select, setSelect] = useState(selected);
     return (
-        <div className={styles["modal-wrap"]}>
+        <div className={`${styles["modal-wrap"]} modal-wrap-rem`}>
             {type == "content" ? (
-                <div className={styles["modal-content"]}>
-                    <div className={styles["modal-top"]}>
-                        <div className={styles["modal-title"]}>
+                <div className={`${styles["modal-content"]} modal-content-rem`}>
+                    <div className={`${styles["modal-top"]} modal-top-rem`}>
+                        <div className={`${styles["modal-title"]} modal-title-rem`}>
                             <Typography variant={TypographyType.p} color="#00236A">{headerText}</Typography>
                         </div>
                         <div
-                            className={styles["close-btn"]}
+                            className={`${styles["close-btn"]} close-btn-rem`}
                             onClick={() => setShow(false)}
                         >
                             <i className="icon-close" />
                         </div>
                     </div>
-                    <div className={styles["modal-section"]}>{children}</div>
+                    <div className={`${styles["modal-section"]} modal-section-rem`}>{children}</div>
                 </div>
             ) : type == "images" ? (
-                <div className={styles["modal-content"]}>
+                <div className={`${styles["modal-content"]} modal-content-rem`}>
                     <div
-                        className={styles["close-btn"]}
+                        className={`${styles["close-btn"]} close-btn-rem`}
                         onClick={() => setShow(false)}
                     >
                         <i className="icon-close" />
                     </div>
 
-                    <div className={styles["modal-section"]}>
+                    <div className={`${styles["modal-section"]} modal-section-rem`}>
                         <div>
                             {select > 1 ? (
                                 <h1 onClick={() => setSelect(select - 1)}>-</h1>

package/src/components/multiselect/index.js

@@ -17,12 +17,12 @@ export const Multiselect = ({
   const [values, setValues] = useState(jsonOptionsData.length ? JSON.parse(jsonOptionsData) : []);
   const [opened, setOpened] = useState(false);
   return (
-    <div className={styles.main}>
-      {label ? <label className={styles['multi-select-title']}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-      <div className={styles['multi-select-content-top']} onClick={() => { setOpened(!opened) }}>
+    <div className={`${styles.main} multi-select`}>
+      {label ? <label className={`${styles['multi-select-title']} multi-select-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
+      <div className={`${styles['multi-select-content-top']} multi-select-content-top-rem`} onClick={() => { setOpened(!opened) }}>
         {
           options.map((option, i) => {
-            return (<div className={styles['multi-select-content-bottom-row']} key={option[keyNames.id]}>
+            return (<div className={`${styles['multi-select-content-bottom-row']} multi-select-content-bottom-row-rem`} key={option[keyNames.id]}>
               <div id={option[keyNames.id]}>{option[keyNames.name]}</div>
               <div
                 onClick={() => {
@@ -33,7 +33,8 @@ export const Multiselect = ({
                   setOpened(true);
                 }}
               >
-                <Icon className='icon-close' />
+                {/*<Icon className='icon-close' />*/}
+                <i className='icon-close'></i>
               </div>
 
             </div>)
@@ -47,19 +48,19 @@ export const Multiselect = ({
 
 
         }} className={styles.input} type='text' />
-        <div className={styles['select-content-top-icon']}>
+        <div className={`${styles['select-content-top-icon']} select-content-top-icon-rem`}>
           <Icon className={opened ? 'icon-arrow-up' : 'icon-arrow-down'} />
         </div>
       </div>
       {
 
-        opened ? <div className={styles['multi-select-content-bottom']} onClick={onchange}>
-          <div className={styles['multi-select-content-bottom-inner']}>
+        opened ? <div className={`${styles['multi-select-content-bottom']} multi-select-content-bottom-rem`} onClick={onchange}>
+          <div className={`${styles['multi-select-content-bottom-inner']} multi-select-content-bottom-inner-rem`}>
             {
               values.length ?
                 values.map((value, i) => {
                   return (<div
-                    className={styles['multi-select-content-bottom-row']}
+                    className={`${styles['multi-select-content-bottom-row']} multi-select-content-bottom-row-rem`}
                     key={value[keyNames.id]}
                     id={value.id}
                     onClick={(e) => {
@@ -71,7 +72,7 @@ export const Multiselect = ({
                     {value[keyNames.name]}
                   </div>)
                 }) :
-                <div className={styles['no-elements']}>No Elements!</div>
+                <div className={`${styles['no-elements']} no-elements-rem`}>No Elements!</div>
             }
           </div>
         </div> : null

package/src/components/pagination/index.js

@@ -42,7 +42,7 @@ export const Pagination = ({
   if (currentPageNumber === 0 || paginationRange.length < 2) {
     return null;
   }
-  const classProps = classnames(styles.list, className ? className : styles["pagination-bar"]);
+  const classProps = classnames(styles.list, className ? className : `${styles["pagination-bar"]} pagination-bar-rem`);
 
     const onNext = () => {
         onPageChange(currentPageNumber + 1);
@@ -68,7 +68,7 @@ export const Pagination = ({
     return (
         <ul className={classProps}>
             <button
-                className={styles["pagination-btn"]}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 onClick={onPrevious}
                 disabled={currentPage === 1 ? true : false}
             >
@@ -83,7 +83,7 @@ export const Pagination = ({
                         <li
                             key={id}
                             className={classnames(
-                                styles["pagination-jump-next"],
+                                `${styles["pagination-jump-next"]} pagination-jump-next-rem`,
                                 styles.listItem
                             )}
                             onClick={
@@ -97,14 +97,14 @@ export const Pagination = ({
                                 <>
                                     <span
                                         className={
-                                            styles["pagination-jump-next-txt"]
+                                            `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
                                         }
                                     >
                                         <i className="icon-text" />
                                     </span>
                                     <span
                                         className={
-                                            styles["pagination-jump-next-arrow"]
+                                            `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
                                         }
                                     >
                                         {/* <Icon className="icon-arrow-jump-next"/> */}
@@ -115,14 +115,14 @@ export const Pagination = ({
                                 <>
                                     <span
                                         className={
-                                            styles["pagination-jump-next-txt"]
+                                            `${styles["pagination-jump-next-txt"]} pagination-jump-next-txt-rem`
                                         }
                                     >
                                         <i className="icon-text" />
                                     </span>
                                     <span
                                         className={
-                                            styles["pagination-jump-next-arrow"]
+                                            `${styles["pagination-jump-next-arrow"]} pagination-jump-next-arrow-rem`
                                         }
                                     >
                                         {/* <Icon className="icon-arrow-jump-next"/> */}
@@ -144,7 +144,7 @@ export const Pagination = ({
                                     ? styles.selected
                                     : styles.listItem
                             }`,
-                            styles["pagination-item"]
+                            `${styles["pagination-item"]} pagination-item-rem`
                         )}
                     >
                         {pageNumber}
@@ -153,7 +153,7 @@ export const Pagination = ({
             })}
             <button
                 onClick={onNext}
-                className={styles["pagination-btn"]}
+                className={`${styles["pagination-btn"]} pagination-btn-rem`}
                 disabled={currentPageNumber === lastPage ? true : false}
             >
                 {/* <Icon className='icon-arrow'/> */}

package/src/components/radio/index.js

@@ -22,7 +22,7 @@ export const Radio = ({
     <>
       {parseData.map((element, id) => {
         return (
-          <label className={styles["radio-wrap"]} key={element.value}>
+          <label className={`${styles["radio-wrap"]} radio-wrap-rem`} key={element.value}>
             <input
               type="radio"
               className={classProps}
@@ -33,7 +33,7 @@ export const Radio = ({
               name={name ? name : element.name}
               {...props}
             />
-            <span className={styles["radio-checkmark"]}/>
+            <span className={`${styles["radio-checkmark"]} radio-checkmark-rem`}/>
             {element.label ? (
               <span className={styles.labelRadio}>
                 {label ? label : element.label}

package/src/components/select/index.js

@@ -74,17 +74,17 @@ export const Select = ({
     
     return (
         <div>
-            {label ? <label className={styles['select-title']}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
-            <div className={styles['select-wrap']} ref={ref}>
+            {label ? <label className={`${styles['select-title']} select-title-rem`}>{label} {required && <sup style={{color: "#ee0000"}}>*</sup>}</label> : ""}
+            <div className={`${styles['select-wrap']} select-wrap-rem`} ref={ref}>
                 <div className={styles['select-content']} id={styles.selector}>
                     <div
-                        className={styles['select-content-top']}
+                        className={`${styles['select-content-top']} select-content-top-rem`}
                         onClick={() => {
                             setOpened(!opened)
                         }}
                     >
-                        <div className={styles['select-content-top-text']}>{newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}</div>
-                        <div className={styles['select-content-top-icon']}>
+                        <div className={`${styles['select-content-top-text']} select-content-top-text-rem`}>{newSelected && newSelected[keyNames.name] ? newSelected[keyNames.name] : defaultOption}</div>
+                        <div className={`${styles['select-content-top-icon']} select-content-top-icon-rem`}>
 
                             {Object.keys(newSelected).length > 0 && 
                                 <i className="icon-close" onClick={
@@ -101,8 +101,8 @@ export const Select = ({
                     </div>
                     {
                         opened && !disabled ?
-                                <div className={styles['select-content-bottom']}>
-                                    <div className={styles['select-content-bottom-inner']}>
+                                <div className={`${styles['select-content-bottom']} select-content-bottom-rem`}>
+                                    <div className={`${styles['select-content-bottom-inner']} select-content-bottom-inner-rem`}>
                                         {/* <div
                                             className={styles['select-content-bottom-row']}
                                             onClick={() => {
@@ -120,7 +120,7 @@ export const Select = ({
                                             options.map((option, i) => {
                                                 return <div
                                                             key={i}
-                                                            className={styles['select-content-bottom-row']}
+                                                            className={`${styles['select-content-bottom-row']} select-content-bottom-row-rem`}
                                                             disabled={true}
                                                             onClick={() => {
                                                                     setNewSelected(option);

package/src/components/stepper/index.js

@@ -4,9 +4,9 @@ import classNames from "classnames";
 import styles from "./stepper.module.css";
 
 export const Stepper = ({ className, onChange, stepLength, activeSteps }) => {
-  const classProps = classNames(className);
+  const classProps = classNames(className, 'stepper-inner-rem');
   return (
-    <div className={styles['stepper-container']}>
+    <div className={`${styles['stepper-container']} stepper-container-rem`}>
       {(() => {
         let steppers = [];
         for (let step = 1; step <= stepLength; step++) {

package/src/components/table/index.js

@@ -31,25 +31,25 @@ export const Table = ({
         : "";
 
     return (
-        <div className={styles["table-wrap"]}>
+        <div className={`${styles["table-wrap"]} table-wrap-rem`}>
             {config.isHeader &&
                 hearderData.map((header, key) => {
                     return (
-                        <div className={styles["table-top"]} key={key}>
-                            <div className={styles["table-items"]}>
+                        <div className={`${styles["table-top"]} table-top-rem`} key={key}>
+                            <div className={`${styles["table-items"]} table-items-rem`}>
                                 {header}
                             </div>
                         </div>
                     );
                 })}
-            <div className={styles["table-bottom"]}>
+            <div className={`${styles["table-bottom"]} table-bottom-rem`}>
                 {tbodyData.map((item, key) => {
                     return (
-                        <div className={styles["table-bottom-inner"]} key={key}>
+                        <div className={`${styles["table-bottom-inner"]} table-bottom-inner-rem`} key={key}>
                             {keyNames.map((keyName, keyNameKey) => {
                                 return (
                                     <div
-                                        className={styles["table-items"]}
+                                        className={`${styles["table-items"]} table-items-rem`}
                                         key={keyNameKey}
                                     >
                                         {config.isCheckbox &&
@@ -83,7 +83,7 @@ export const Table = ({
                             })}
 
                             {actions && (
-                                <div className={styles["table-items"]}>
+                                <div className={`${styles["table-items"]} table-items-rem`}>
                                     {actions.filter(a => a.show && a.show(item) || a.show === undefined).map((action, key) => {
                                             return (<div key={key}>
                                                 <i className={action.icon} onClick={action.click? action.click : ()=>{}}>

package/src/components/typography/index.js

@@ -19,7 +19,7 @@ export const TypographyType = {
 
 
 export const Typography = ({onClick, variant, className, color, bold, children, ...props }) => {
-	const classProps = classnames(className,bold ? 'bold': '');
+	const classProps = classnames(className,'sizes-rem',bold ? 'bold': '');
 	const CustomTag = variant;
 	
 	// const Tag = ({ className, children }) => (

package/.idea/jsLibraryMappings.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptLibraryMappings">
-    <excludedPredefinedLibrary name="tui/node_modules" />
-  </component>
-</project>

package/.idea/misc.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="JavaScriptSettings">
-    <option name="languageLevel" value="JSX" />
-  </component>
-</project>

package/.idea/modules.xml

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ProjectModuleManager">
-    <modules>
-      <module fileurl="file://$PROJECT_DIR$/.idea/tui.iml" filepath="$PROJECT_DIR$/.idea/tui.iml" />
-    </modules>
-  </component>
-</project>

package/.idea/tui.iml

@@ -1,12 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<module type="WEB_MODULE" version="4">
-  <component name="NewModuleRootManager">
-    <content url="file://$MODULE_DIR$">
-      <excludeFolder url="file://$MODULE_DIR$/temp" />
-      <excludeFolder url="file://$MODULE_DIR$/.tmp" />
-      <excludeFolder url="file://$MODULE_DIR$/tmp" />
-    </content>
-    <orderEntry type="inheritedJdk" />
-    <orderEntry type="sourceFolder" forTests="false" />
-  </component>
-</module>

package/.idea/vcs.xml

@@ -1,6 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="VcsDirectoryMappings">
-    <mapping directory="$PROJECT_DIR$" vcs="Git" />
-  </component>
-</project>

package/.idea/workspace.xml

@@ -1,66 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<project version="4">
-  <component name="ChangeListManager">
-    <list default="true" id="30dbb06f-44af-47c8-ab66-a66514b5b93b" name="Default Changelist" comment="">
-      <change beforePath="$PROJECT_DIR$/.idea/tui.iml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/tui.iml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/components/file/file.module.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/file/file.module.css" afterDir="false" />
-    </list>
-    <option name="SHOW_DIALOG" value="false" />
-    <option name="HIGHLIGHT_CONFLICTS" value="true" />
-    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
-    <option name="LAST_RESOLUTION" value="IGNORE" />
-  </component>
-  <component name="Git.Settings">
-    <option name="RECENT_BRANCH_BY_REPOSITORY">
-      <map>
-        <entry key="$PROJECT_DIR$" value="master" />
-      </map>
-    </option>
-    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
-  </component>
-  <component name="ProjectId" id="2K67SIWiFpjLifxjyrHQQvdETp8" />
-  <component name="ProjectViewState">
-    <option name="hideEmptyMiddlePackages" value="true" />
-    <option name="showLibraryContents" value="true" />
-  </component>
-  <component name="PropertiesComponent">
-    <property name="Git.Branch.Popup.ShowAllRemotes" value="true" />
-    <property name="RunOnceActivity.OpenProjectViewOnStart" value="true" />
-    <property name="RunOnceActivity.ShowReadmeOnStart" value="true" />
-    <property name="WebServerToolWindowFactoryState" value="false" />
-    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
-    <property name="node.js.detected.package.eslint" value="true" />
-    <property name="node.js.detected.package.tslint" value="true" />
-    <property name="node.js.selected.package.eslint" value="(autodetect)" />
-    <property name="node.js.selected.package.tslint" value="(autodetect)" />
-    <property name="nodejs_package_manager_path" value="npm" />
-    <property name="vue.rearranger.settings.migration" value="true" />
-  </component>
-  <component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
-  <component name="TaskManager">
-    <task active="true" id="Default" summary="Default task">
-      <changelist id="30dbb06f-44af-47c8-ab66-a66514b5b93b" name="Default Changelist" comment="" />
-      <created>1673283176577</created>
-      <option name="number" value="Default" />
-      <option name="presentableId" value="Default" />
-      <updated>1673283176577</updated>
-      <workItem from="1673283177941" duration="620000" />
-    </task>
-    <servers />
-  </component>
-  <component name="TypeScriptGeneratedFilesManager">
-    <option name="version" value="3" />
-  </component>
-  <component name="Vcs.Log.Tabs.Properties">
-    <option name="TAB_STATES">
-      <map>
-        <entry key="MAIN">
-          <value>
-            <State />
-          </value>
-        </entry>
-      </map>
-    </option>
-  </component>
-</project>