jrs-react 1.2.4 → 1.2.6

package/build/index.es.js

@@ -7086,7 +7086,7 @@ const StyledJRTable = styled.div`
 
             th{
                 position: relative;
-                height:32px;
+                height:24px;
                 padding: 4px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
@@ -7413,7 +7413,7 @@ class JRTable extends JRFrame {
 
 const StyleJRFields = styled.main`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
+    --column-b-color:unset;
     --column-b-hover-color:#ffffff;
 
     flex-direction: column;
@@ -7421,21 +7421,17 @@ const StyleJRFields = styled.main`
     overflow: overlay;
 
     color:#525252;
-    XXXborder: 1px solid #a0a0a0;
-    background: var(--column-b-color);
 
     >.jr-grid{
-        background:var(--column-b-color);
-
         .jr-column{
-            padding: 6px;
-
-            label{
+            > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 4px 10px 4px 0;
+                padding: 3px 8px;
                 font-weight: bold;
             }
+            > .jr-column-value{
+            }
         }
     }
 `;
@@ -7523,8 +7519,9 @@ const StyledColumnLabel = styled.label`
 
 `;
 const StyledColumnValue = styled.main`
-    Xflex:1;
+    flex:1;
     Xdisplay:flex;
+    flex-direction: column;
     overflow: hidden;
 
     text-align: start;
@@ -7633,7 +7630,6 @@ class JRFields extends JRFrame {
       no += 1;
       const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
       const fullname = fullnameList.join('.');
-      // po(`${no} - ${tab}fn= ${fullname}`)
       this.#findValidator(acc, fullname, column);
       if (type == null && columns) {
         this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
@@ -7725,17 +7721,12 @@ class JRFields extends JRFrame {
     required,
     ...column
   }, index, parentName, fullname) {
-    // po('----------------------------------------')
-    // po('parentName',parentName)
-    // po('fullname',fullname)
     const value = name ? parentValue?.[name] : parentValue;
     const gap = column.gap ?? this.props.gap;
     const label = column.label;
     const _style = flexType(style, this, {}, {});
     if (colSpan) _style.gridColumn = `span ${colSpan}`;
     if (rowSpan) _style.gridRow = `span ${rowSpan}`;
-    // Object.assign(_style,style)
-
     let content;
     this.createValidator({
       required,
@@ -7744,7 +7735,6 @@ class JRFields extends JRFrame {
     const fn = fullname.join('.');
     const onChange = inputValue => {
       const targetValue = inputValue?.target?.value ?? inputValue;
-      // po('===Form onChange===',targetValue)
       try {
         parentValue[name] = targetValue;
         this.setValue({
@@ -7832,12 +7822,13 @@ class JRFields extends JRFrame {
   }
   renderMe() {
     return /*#__PURE__*/React.createElement(StyleJRFields, {
-      className: 'jr-fields'
+      className: 'jr-fields',
+      style: this.props.typeStyle
     }, /*#__PURE__*/React.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,
       className: 'jr-grid',
-      $gap: this.props.gap
+      $gap: this.props.gap ?? '8px'
     }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [])));
   }
 

package/build/index.js

@@ -7094,7 +7094,7 @@ const StyledJRTable = styled__default["default"].div`
 
             th{
                 position: relative;
-                height:32px;
+                height:24px;
                 padding: 4px;
                 background: linear-gradient(180deg, rgba(227, 227, 226, 1) 0%, rgba(255, 255, 255, 1) 25%, rgba(210, 210, 210, 1) 100%);
                 box-shadow: 2px 2px 2px 0 #ffffffd6 inset, -1px -1px 2px 0px #8a847dbf inset;
@@ -7421,7 +7421,7 @@ class JRTable extends JRFrame {
 
 const StyleJRFields = styled__default["default"].main`
     --column-bd-color:#cccccc;
-    --column-b-color:#eeeeee;
+    --column-b-color:unset;
     --column-b-hover-color:#ffffff;
 
     flex-direction: column;
@@ -7429,21 +7429,17 @@ const StyleJRFields = styled__default["default"].main`
     overflow: overlay;
 
     color:#525252;
-    XXXborder: 1px solid #a0a0a0;
-    background: var(--column-b-color);
 
     >.jr-grid{
-        background:var(--column-b-color);
-
         .jr-column{
-            padding: 6px;
-
-            label{
+            > .label{
                 color:#525252;
                 text-wrap: nowrap;
-                padding: 4px 10px 4px 0;
+                padding: 3px 8px;
                 font-weight: bold;
             }
+            > .jr-column-value{
+            }
         }
     }
 `;
@@ -7531,8 +7527,9 @@ const StyledColumnLabel = styled__default["default"].label`
 
 `;
 const StyledColumnValue = styled__default["default"].main`
-    Xflex:1;
+    flex:1;
     Xdisplay:flex;
+    flex-direction: column;
     overflow: hidden;
 
     text-align: start;
@@ -7641,7 +7638,6 @@ class JRFields extends JRFrame {
       no += 1;
       const fullnameList = name ? [..._fullnameList, name] : _fullnameList;
       const fullname = fullnameList.join('.');
-      // po(`${no} - ${tab}fn= ${fullname}`)
       this.#findValidator(acc, fullname, column);
       if (type == null && columns) {
         this.#loopColumnsForValidateValue(no, fullnameList, columns, `${tab}\t`, result);
@@ -7733,17 +7729,12 @@ class JRFields extends JRFrame {
     required,
     ...column
   }, index, parentName, fullname) {
-    // po('----------------------------------------')
-    // po('parentName',parentName)
-    // po('fullname',fullname)
     const value = name ? parentValue?.[name] : parentValue;
     const gap = column.gap ?? this.props.gap;
     const label = column.label;
     const _style = flexType(style, this, {}, {});
     if (colSpan) _style.gridColumn = `span ${colSpan}`;
     if (rowSpan) _style.gridRow = `span ${rowSpan}`;
-    // Object.assign(_style,style)
-
     let content;
     this.createValidator({
       required,
@@ -7752,7 +7743,6 @@ class JRFields extends JRFrame {
     const fn = fullname.join('.');
     const onChange = inputValue => {
       const targetValue = inputValue?.target?.value ?? inputValue;
-      // po('===Form onChange===',targetValue)
       try {
         parentValue[name] = targetValue;
         this.setValue({
@@ -7840,12 +7830,13 @@ class JRFields extends JRFrame {
   }
   renderMe() {
     return /*#__PURE__*/React.createElement(StyleJRFields, {
-      className: 'jr-fields'
+      className: 'jr-fields',
+      style: this.props.typeStyle
     }, /*#__PURE__*/React.createElement(StyledGrid, {
       cols: this.props.cols,
       style: this.props.gridStyle,
       className: 'jr-grid',
-      $gap: this.props.gap
+      $gap: this.props.gap ?? '8px'
     }, this.createColumns(this.props.dataSourceName ? this.getValue()?.[this.props.dataSourceName] : this.getValue(), this.props.columns, this.props.dataSourceName ? [this.props.dataSourceName] : [], this.props.dataSourceName ? [this.props.dataSourceName] : [])));
   }
 

package/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React</title>
+  </head>
+  <body style="background: black;color:gray;">
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.4",
+	"version": "1.2.6",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",
@@ -8,19 +8,30 @@
 		"test": "echo \"Error: no test specified\" && exit 1",
 		"build": "rollup -c",
 		"storybook": "storybook dev -p 6006",
-		"build-storybook": "storybook build"
+		"build-storybook": "storybook build",
+		"vite": "vite"
 	},
 	"author": "JorenLai",
 	"license": "MIT",
 	"dependencies": {
+		"@eslint/js": "^9.21.0",
 		"@rollup/plugin-commonjs": "^28.0.3",
 		"@rollup/plugin-json": "^6.1.0",
+		"@types/react": "^19.0.10",
+		"@types/react-dom": "^19.0.4",
+		"@vitejs/plugin-react": "^4.3.4",
 		"antd": "^5.12.5",
 		"axios": "^1.6.2",
+		"eslint": "^9.21.0",
+		"eslint-plugin-react-hooks": "^5.1.0",
+		"eslint-plugin-react-refresh": "^0.4.19",
+		"globals": "^15.15.0",
 		"react": "^18.2.0",
 		"react-dom": "^18.2.0",
+		"react-router-dom": "^7.4.0",
 		"rollup-plugin-node-resolve": "^5.2.0",
-		"styled-components": "^6.1.15"
+		"styled-components": "^6.1.15",
+		"vite": "^6.2.0"
 	},
 	"devDependencies": {
 		"@babel/core": "^7.26.10",

package/public/data.json

@@ -0,0 +1,9 @@
+{
+    "name":"Joren"
+    ,"phone":[
+         {"phone":"0948272834","name":"中華電信"}
+        ,{"phone":"0987304555","name":"遠傳"}
+    ]
+    ,"account":"jorenlai"
+    ,"email":"joren.lai@gmail.com"
+}

package/public/list.json

@@ -0,0 +1,20 @@
+[
+    {
+        "name":"Joren"
+        ,"phone":"097459999"
+        ,"address":{
+            "no":"23"
+            ,"street":"Jalan Indah"
+            ,"country":"Malaysia"
+        }
+    }
+    ,{
+        "name":"John"
+        ,"phone":"0124873737"
+        ,"address":{
+            "no":"36"
+            ,"street":"景興路"
+            ,"country":"台灣"
+        }
+    }
+]

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/app/App.css

@@ -0,0 +1,8 @@
+#root {
+    
+}
+
+html,*,*:before,*:after {
+    box-sizing: border-box;
+  }
+  

package/src/app/App.jsx

@@ -0,0 +1,17 @@
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
+import './App.css'
+import TableApp from './table/TableApp'
+import FieldsApp from './fields/FieldsApp'
+import WindowApp from './window/WindowApp'
+
+function App() {
+	return <BrowserRouter>
+		<Routes>
+			<Route path="/table" element={<TableApp/>}/>
+			<Route path="/fields" element={<FieldsApp/>}/>
+			<Route path="/window" element={<WindowApp/>}/>
+		</Routes>
+	</BrowserRouter>
+}
+
+export default App

package/src/app/fields/FieldsApp.jsx

@@ -0,0 +1,12 @@
+
+import JRFields from "../../components/JRFields/JRFields";
+import JRText from "../../components/JRInput/JRText";
+import JRTable from "../../components/JRTable/JRTable";
+import { fieldsConfig } from "./fieldsConfig";
+
+
+export default function FieldsApp() {
+	return <JRFields
+        {...fieldsConfig}
+    />
+}

package/src/app/fields/fieldsConfig.jsx

@@ -0,0 +1,137 @@
+import { Input } from "antd";
+import JRFields from "../../components/JRFields/JRFields";
+import JRSelect from "../../components/JRInput/JRSelect";
+import JRText from "../../components/JRInput/JRText";
+import JRTable from "../../components/JRTable/JRTable";
+import { po } from "../../components/JRUtils";
+
+export const fieldsConfig={
+        popup:true
+        ,mask:true
+        ,width:'700px'
+        ,height:'500px'
+
+        ,get:{
+            url:'data.json'
+            ,autoRun:true
+            ,successMessage:'YES'
+            ,mask:'Loading'
+        }
+        ,style:{
+            padding:'18px'
+            ,background:'black'
+            ,gap:'20px'
+        }
+        ,typeStyle:{
+            padding:'8px'
+            ,background:'#eeeeee'
+        }
+        ,columns:[
+            {name:'name',label:'姓名',type:JRText}
+            ,{name:'birthday',label:'生日',type:Input}
+            ,{name:'phone',label:'電話號碼',type:JRTable
+                ,top({setStyle}){
+                    return <>
+                        <button
+                            onClick={()=>{
+                                this.get()
+                            }}
+                        >Get</button>
+                        <button
+                            onClick={()=>{
+                                this.reset()
+                            }}
+                        >Reset</button>
+                    </>
+                }
+                ,bottom({setStyle}){
+                    setStyle({color:'green',border:'1px solid green',height:'140px',overflow: 'overlay'})
+                    return<div style={{
+                        display: 'flex'
+                        ,justifyContent: 'space-around'
+                    }}>
+                        <pre style={{flex:1}}>
+                        {JSON.stringify(this.getValue(),4,4)}
+                        </pre>
+                        <pre style={{flex:1}}>
+                        {JSON.stringify(this.rawValue,4,4)}
+                        </pre>
+                    </div>
+                }
+                ,get:{
+                    url:'list.json'
+                }
+                ,colSpan:2
+                ,resizableColumns:true
+                ,typeStyle:{
+                    height:'300px'
+                }
+                ,columns:[
+                    {name:'name',label:'電信公司'}
+                    ,{name:'phone',label:'號碼',type:JRText}
+                    ,{
+                        name:'address'
+                        ,label:'地址'
+                        ,type:JRFields
+                        ,labelProps:{
+                            width:'min-content'
+                            ,style:{
+                                paddingLeft:'20px'
+                            }
+                        }
+                        ,columns:[
+                            {name:'no',label:'門牌',type:JRText}
+                            ,{name:'street',label:'街',type:JRText}
+                            ,{name:'country',label:'國家',type:JRSelect}
+                            ,{name:'p',label:'郵區',type:JRText}
+                        ]
+                        ,cols:4
+                    }
+                ]
+            }
+            // ,{
+            //     name:'address'
+            //     ,label:'地址'
+            //     ,type:JRFields
+            //     ,colSpan:2
+            //     ,columns:[
+            //         {name:'no',label:'號碼',type:JRText}
+            //         ,{name:'street',label:'街',type:JRText}
+            //         ,{name:'country',label:'國家',type:JRText}
+            //     ]
+            //     ,cols:1
+            // }
+            // ,{name:'email',label:'電子郵件',type:JRText}
+            // ,{name:'account',label:'帳號'}
+        ]
+        ,cols:2
+        ,right({setStyle}){
+            setStyle({color:'green',border:'1px solid green',width:'100px',whiteSpace:'pre',overflow: 'overlay'})
+            return <>
+                <button
+                    onClick={()=>{
+                        this.get()
+                    }}
+                >Get</button>
+                <button
+                    onClick={()=>{
+                        this.reset()
+                    }}
+                >Reset</button>
+            </>
+        }
+        ,bottom({setStyle}){
+            setStyle({color:'gray',border:'1px solid blue',whiteSpace:'pre',overflow: 'overlay'})
+            return <div style={{
+                display: 'flex'
+                ,justifyContent: 'space-around'
+            }}>
+                <pre>
+                {JSON.stringify(this.getValue(),4,4)}
+                </pre>
+                <pre>
+                {JSON.stringify(this.rawValue,4,4)}
+                </pre>
+            </div>
+        }
+}

package/src/app/index.css

@@ -0,0 +1,42 @@
+:root {
+
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+}
+
+h1 {
+  line-height: 1.1;
+}
+
+button {
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

package/src/app/table/TableApp.jsx

@@ -0,0 +1,10 @@
+import JRFields from "../../components/JRFields/JRFields";
+import JRText from "../../components/JRInput/JRText";
+import JRTable from "../../components/JRTable/JRTable";
+import { tableConfig } from "./tableConfig";
+
+export default function TableApp() {
+	return <JRTable
+        {...tableConfig}
+    />
+}

package/src/app/table/tableConfig.jsx

@@ -0,0 +1,86 @@
+import JRText from "../../components/JRInput/JRText";
+
+export const tableConfig={
+    popup:true
+	,height:500
+	,width:600
+	,get:{
+		url:'list.json'
+		,autoRun:true
+		,successMessage:'YES'
+		,mask:'Loading'
+    }
+	,columns:[
+		{name:'Test',label:'1'
+			,rowSpan:4
+			,columns:[
+				{name:'Test21',label:'1_1'
+					,columns:[
+						{name:'Test21',label:'1_1_1',xdescribewidth:'20%'}
+						,{name:'Test21',label:'1_1_2',xwidth:'20%'}
+						,{name:'Test21',label:'1_1_3',xwidth:'20%'}
+					]
+
+				}
+				,{name:'Test22',label:'1_2',xwidth:'30%'}
+				,{name:'Test22',label:'1_3',xwidth:'30%'}
+			]
+		}
+
+		,{name:'Test2',label:'2'
+			,columns:[
+				{name:'Test21',label:'2_1'}
+				,{name:'Test21',label:'2_2'
+					,rowSpan:4
+					,columns:[
+						{name:'Test21',label:'2_2_1'}
+						,{name:'Test21',label:'2_2_2'}
+					]
+				}
+			]
+		}
+
+		,{name:'Test',label:'3'
+			,columns:[
+				{name:'Test21',label:'3_1'}
+				,{name:'Test22',label:'3_2'}
+				,{name:'Test22',label:'3_3'
+					,columns:[
+						{name:'Test21',label:'3_3_1'}
+						,{name:'Test21',label:'3_3_2'
+							,columns:[
+								{name:'Test21',label:'3_3_2_1'}
+								,{name:'Test21',label:'3_3_2_2'
+									,columns:[
+										{name:'Test21',label:'3_3_2_2_1'
+											,columns:[
+												{name:'Test21',label:'3_3_2_2_1_1'}
+											]
+										}
+									]
+								}
+							]
+						}
+					]
+
+				}
+			]
+		}
+
+		,{name:'Test2',label:'4'
+			,columns:[
+				{name:'Test21',label:'4_1'}
+				,{name:'Test21',label:'4_2'
+					,columns:[
+						{name:'Test21',label:'4_2_1'}
+					]
+				}
+			]
+		}
+		,{name:'Test2',label:'5'}
+		// ,{name:'Test2',label:'6'}
+		// ,{name:'Test2',label:'7'}
+		// ,{name:'Test2',label:'8'}
+	]
+	,resizableColumns:true
+}