jrs-react 1.2.34 → 1.2.36

package/build/index.es.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { useState } from 'react';
+import React__default, { forwardRef, useRef, useState } from 'react';
 import styled from 'styled-components';
 import { createRoot } from 'react-dom/client';
 
@@ -3439,6 +3439,12 @@ const css = `
     z-index: 20000;
     overflow: hidden;
     background:#000000aa;
+    animation: divDelay .3s;
+    @keyframes divDelay {
+        from {background:transparent;visibility:hidden;}
+        40% {background:transparent;visibility:hidden;}
+        to {background:#000000aa;visibility:visible;}
+    }
     
     .cs-loader-inner {
 		transform: translateY(-30%);
@@ -3533,10 +3539,10 @@ const StyledDialogMask = styled.dialog`
 
     &:modal  {
         outline: 0;
-        animation: myfirst .3s;
-        @keyframes myfirst {
+        animation: modalDelay .3s;
+        @keyframes modalDelay {
             from {background:transparent;visibility:hidden;}
-            99% {background:transparent;visibility:hidden;}
+            40% {background:transparent;visibility:hidden;}
             to {background:#000000aa;visibility:visible;}
         }
     }
@@ -3933,30 +3939,139 @@ class JRSubmit extends React__default.Component {
   }
 }
 
-const FreeType = ({
+const StyledSlider$2 = styled.div`
+    background:#2d2d2d;
+    flex-basis:11px;
+    user-select: none;
+    cursor: ${({
+  $dir
+}) => $dir === 'left' || $dir === 'right' ? 'col-resize' : 'row-resize'} ;
+`;
+class Slider$2 extends React__default.Component {
+  ref = /*#__PURE__*/React__default.createRef();
+  resize = {
+    left: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = clientX - this.frame.x - this.frame.shw;
+      if (width < 0) width = 0;
+      ref.style.flexBasis = `${width}px`;
+    },
+    right: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = this.frame.x2 - clientX - this.frame.shw;
+      if (width < 0) width = 0;
+      po('width', width);
+      ref.style.flexBasis = `${width}px`;
+    },
+    top: ({
+      clientY
+    }) => {
+      po('top');
+      const ref = this.props.contenerRef.current;
+      let height = clientY - this.frame.y - this.frame.shh;
+      po('height', height);
+      // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    },
+    bottom: ({
+      clientY
+    }) => {
+      po('bottom');
+      const ref = this.props.contenerRef.current;
+      let height = this.frame.w2 - clientY - this.frame.shh;
+      // clientY-this.frame.y-this.frame.shh
+      // po('height',height)
+      // // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    }
+  };
+  stop = e => {
+    po('stop', this.stop);
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = e => {
+    this.resize[this.props.dir](e);
+  };
+  start = ({
+    clientX
+  }) => {
+    console.clear();
+    const ref = this.props.contenerRef.current;
+    const {
+      x,
+      y,
+      width,
+      height,
+      ...other
+    } = ref.getBoundingClientRect();
+    po('other', ref.getBoundingClientRect());
+    po('ref.getBoundingClientRect()', this.ref.current.getBoundingClientRect());
+    const {
+      width: sw,
+      height: sh
+    } = this.ref.current.getBoundingClientRect();
+    this.frame = {
+      x,
+      y,
+      shw: sw / 2,
+      shh: sh / 2,
+      x2: x + width,
+      w2: y + height
+    };
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  };
+  render() {
+    return /*#__PURE__*/React__default.createElement(StyledSlider$2, {
+      onMouseDown: this.start,
+      ref: this.ref,
+      $dir: this.props.dir
+    });
+  }
+}
+
+const FreeType = /*#__PURE__*/forwardRef(function ({
   tag: Tag,
   config,
   me,
   className
-}) => {
+}, ref) {
+  let style;
+  const setStyle = function (_style) {
+    style = _style;
+  };
   if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
     const content = config.bind(me)({
       setStyle
     });
     return /*#__PURE__*/React__default.createElement(Tag, {
       className: className,
-      style: style
+      style: style,
+      ref: ref
+    }, content);
+  } else if (config?.render) {
+    const content = config.render.bind(me)({
+      setStyle
+    });
+    return /*#__PURE__*/React__default.createElement(Tag, {
+      className: className,
+      style: style,
+      ref: ref
     }, content);
   } else if (typeof config === 'string') {
     return /*#__PURE__*/React__default.createElement(Tag, {
-      className: className
+      className: className,
+      ref: ref
     }, config);
   }
-};
+});
 const StyledJRFrame = styled.div`
     color:#525252;
     background:white;
@@ -3995,6 +4110,44 @@ const StyledJRFrame = styled.div`
 
     }
 `;
+function FreeTypeWithSlider({
+  tag,
+  config,
+  me,
+  className,
+  dir
+}) {
+  if (config) {
+    if (config.resizable) {
+      const ref = useRef();
+      const arr = [/*#__PURE__*/React__default.createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className,
+        ref: ref,
+        key: 'frame'
+      }), /*#__PURE__*/React__default.createElement(Slider$2, {
+        contenerRef: ref,
+        dir: dir,
+        key: 'slider'
+      })];
+      po('right', dir);
+      if (['right'].indexOf(dir) > -1 || ['bottom'].indexOf(dir) > -1) {
+        return arr.reverse();
+      } else {
+        return arr;
+      }
+    } else {
+      return /*#__PURE__*/React__default.createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className
+      });
+    }
+  }
+}
 class JRFrame extends JRSubmit {
   rid = random(99999, 10000);
   mask = this.props.mask ? () => {
@@ -4013,36 +4166,43 @@ class JRFrame extends JRSubmit {
       id: this.props.id,
       style: this.props.style,
       className: `jr-frame ${this.props.popup !== true ? this.props.className : ''}`
-    }, /*#__PURE__*/React__default.createElement(FreeType, {
+    }, /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.start,
       me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
+      className: 'start',
+      dir: 'left'
+    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "header",
       config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeType, {
+      me: this,
+      className: 'header',
+      dir: 'top'
+    }), /*#__PURE__*/React__default.createElement("main", null, /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.left,
       me: this,
-      className: 'left'
+      className: 'left',
+      dir: 'left'
     }), /*#__PURE__*/React__default.createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeType, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.right,
       me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default.createElement(FreeType, {
+      className: 'right',
+      dir: 'right'
+    })), /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "footer",
       config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default.createElement(FreeType, {
+      me: this,
+      dir: 'bottom'
+    })), /*#__PURE__*/React__default.createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.end,
       me: this,
-      className: 'end'
+      className: 'end',
+      dir: 'right'
     }), this.mask?.());
   }
 }
@@ -4910,6 +5070,7 @@ class Slider extends React__default.Component {
     this.sliderRef = /*#__PURE__*/React__default.createRef();
   }
   stop = e => {
+    po('stop', this);
     this.sliderRef.current.classList.remove('resizing');
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
@@ -4918,6 +5079,7 @@ class Slider extends React__default.Component {
   move = ({
     clientX
   }) => {
+    po('move');
     const {
       th,
       selectedCols,
@@ -4935,6 +5097,7 @@ class Slider extends React__default.Component {
     });
   };
   start(thPRef, column) {
+    po('start', this.start);
     const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
     const totalWidth = selectedCols.reduce((aco, {
       offsetWidth
@@ -5897,8 +6060,8 @@ class JRFields extends JRWindow {
       content = /*#__PURE__*/React__default.createElement(StyledColumnValue, {
         className: 'jr-column-value',
         style: {
-          gridColumn: label == null ? 'span 2' : null,
-          padding: column.render ? '4px 0' : null
+          gridColumn: label == null ? 'span 2' : null
+          // ,padding:column.render?'4px 0':null
         }
       }, column.render ? column.render.bind(this)({
         onChange,
@@ -6396,13 +6559,14 @@ class JRSelect extends JROptions {
       multiple,
       size
     } = this.props;
+    const value = this.getValue() ?? (multiple ? [] : '');
     const options = [...(this.getOptions() ?? [])];
-    if (multiple != true && showBlank != false) options.unshift({
-      [valueName]: '',
+    if (!multiple && (showBlank != false || value == '')) options.unshift({
+      [valueName]: null,
       [labelName]: ''
     });
     return /*#__PURE__*/React__default.createElement(StyledSelect, {
-      value: this.getValue() ?? (multiple ? [] : ''),
+      value: value,
       className: 'jr-select',
       onChange: e => {
         if (multiple) {
@@ -6410,7 +6574,7 @@ class JRSelect extends JROptions {
           this.setValue(selectedIndex.length ? selectedIndex.map(index => options[index][valueName]) : null);
         } else {
           const selectedIndex = e.target.selectedOptions[0].index;
-          this.setValue(selectedIndex ? options[selectedIndex][valueName] : null);
+          this.setValue(selectedIndex > -1 ? options[selectedIndex][valueName] : null);
         }
       },
       size: size,
@@ -6420,7 +6584,7 @@ class JRSelect extends JROptions {
         value: record[valueName],
         key: key
       };
-      if (multiple && this.getValue()?.indexOf(record[valueName]) > -1 || this.getValue() == record[valueName]) {
+      if (multiple && value?.indexOf(record[valueName]) > -1 || value == record[valueName]) {
         props.className = 'selected';
       }
       return /*#__PURE__*/React__default.createElement(StyledOption, props, record[labelName]);

package/build/index.js

@@ -3466,6 +3466,12 @@ const css = `
     z-index: 20000;
     overflow: hidden;
     background:#000000aa;
+    animation: divDelay .3s;
+    @keyframes divDelay {
+        from {background:transparent;visibility:hidden;}
+        40% {background:transparent;visibility:hidden;}
+        to {background:#000000aa;visibility:visible;}
+    }
     
     .cs-loader-inner {
 		transform: translateY(-30%);
@@ -3560,10 +3566,10 @@ const StyledDialogMask = styled__default["default"].dialog`
 
     &:modal  {
         outline: 0;
-        animation: myfirst .3s;
-        @keyframes myfirst {
+        animation: modalDelay .3s;
+        @keyframes modalDelay {
             from {background:transparent;visibility:hidden;}
-            99% {background:transparent;visibility:hidden;}
+            40% {background:transparent;visibility:hidden;}
             to {background:#000000aa;visibility:visible;}
         }
     }
@@ -3960,30 +3966,139 @@ class JRSubmit extends React__default["default"].Component {
   }
 }
 
-const FreeType = ({
+const StyledSlider$2 = styled__default["default"].div`
+    background:#2d2d2d;
+    flex-basis:11px;
+    user-select: none;
+    cursor: ${({
+  $dir
+}) => $dir === 'left' || $dir === 'right' ? 'col-resize' : 'row-resize'} ;
+`;
+class Slider$2 extends React__default["default"].Component {
+  ref = /*#__PURE__*/React__default["default"].createRef();
+  resize = {
+    left: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = clientX - this.frame.x - this.frame.shw;
+      if (width < 0) width = 0;
+      ref.style.flexBasis = `${width}px`;
+    },
+    right: ({
+      clientX
+    }) => {
+      const ref = this.props.contenerRef.current;
+      let width = this.frame.x2 - clientX - this.frame.shw;
+      if (width < 0) width = 0;
+      po('width', width);
+      ref.style.flexBasis = `${width}px`;
+    },
+    top: ({
+      clientY
+    }) => {
+      po('top');
+      const ref = this.props.contenerRef.current;
+      let height = clientY - this.frame.y - this.frame.shh;
+      po('height', height);
+      // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    },
+    bottom: ({
+      clientY
+    }) => {
+      po('bottom');
+      const ref = this.props.contenerRef.current;
+      let height = this.frame.w2 - clientY - this.frame.shh;
+      // clientY-this.frame.y-this.frame.shh
+      // po('height',height)
+      // // if(width<0)width=0
+      ref.style.flexBasis = `${height}px`;
+    }
+  };
+  stop = e => {
+    po('stop', this.stop);
+    document.body.style.cursor = 'default';
+    window.removeEventListener('mousemove', this.move);
+    window.removeEventListener('mouseup', this.stop);
+  };
+  move = e => {
+    this.resize[this.props.dir](e);
+  };
+  start = ({
+    clientX
+  }) => {
+    console.clear();
+    const ref = this.props.contenerRef.current;
+    const {
+      x,
+      y,
+      width,
+      height,
+      ...other
+    } = ref.getBoundingClientRect();
+    po('other', ref.getBoundingClientRect());
+    po('ref.getBoundingClientRect()', this.ref.current.getBoundingClientRect());
+    const {
+      width: sw,
+      height: sh
+    } = this.ref.current.getBoundingClientRect();
+    this.frame = {
+      x,
+      y,
+      shw: sw / 2,
+      shh: sh / 2,
+      x2: x + width,
+      w2: y + height
+    };
+    document.body.style.cursor = 'col-resize';
+    window.addEventListener('mousemove', this.move);
+    window.addEventListener('mouseup', this.stop);
+  };
+  render() {
+    return /*#__PURE__*/React__default["default"].createElement(StyledSlider$2, {
+      onMouseDown: this.start,
+      ref: this.ref,
+      $dir: this.props.dir
+    });
+  }
+}
+
+const FreeType = /*#__PURE__*/React.forwardRef(function ({
   tag: Tag,
   config,
   me,
   className
-}) => {
+}, ref) {
+  let style;
+  const setStyle = function (_style) {
+    style = _style;
+  };
   if (typeof config === 'function') {
-    let style;
-    const setStyle = function (_style) {
-      style = _style;
-    };
     const content = config.bind(me)({
       setStyle
     });
     return /*#__PURE__*/React__default["default"].createElement(Tag, {
       className: className,
-      style: style
+      style: style,
+      ref: ref
+    }, content);
+  } else if (config?.render) {
+    const content = config.render.bind(me)({
+      setStyle
+    });
+    return /*#__PURE__*/React__default["default"].createElement(Tag, {
+      className: className,
+      style: style,
+      ref: ref
     }, content);
   } else if (typeof config === 'string') {
     return /*#__PURE__*/React__default["default"].createElement(Tag, {
-      className: className
+      className: className,
+      ref: ref
     }, config);
   }
-};
+});
 const StyledJRFrame = styled__default["default"].div`
     color:#525252;
     background:white;
@@ -4022,6 +4137,44 @@ const StyledJRFrame = styled__default["default"].div`
 
     }
 `;
+function FreeTypeWithSlider({
+  tag,
+  config,
+  me,
+  className,
+  dir
+}) {
+  if (config) {
+    if (config.resizable) {
+      const ref = React.useRef();
+      const arr = [/*#__PURE__*/React__default["default"].createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className,
+        ref: ref,
+        key: 'frame'
+      }), /*#__PURE__*/React__default["default"].createElement(Slider$2, {
+        contenerRef: ref,
+        dir: dir,
+        key: 'slider'
+      })];
+      po('right', dir);
+      if (['right'].indexOf(dir) > -1 || ['bottom'].indexOf(dir) > -1) {
+        return arr.reverse();
+      } else {
+        return arr;
+      }
+    } else {
+      return /*#__PURE__*/React__default["default"].createElement(FreeType, {
+        tag: tag,
+        config: config,
+        me: me,
+        className: className
+      });
+    }
+  }
+}
 class JRFrame extends JRSubmit {
   rid = random(99999, 10000);
   mask = this.props.mask ? () => {
@@ -4040,36 +4193,43 @@ class JRFrame extends JRSubmit {
       id: this.props.id,
       style: this.props.style,
       className: `jr-frame ${this.props.popup !== true ? this.props.className : ''}`
-    }, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+    }, /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.start,
       me: this,
-      className: 'start'
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      className: 'start',
+      dir: 'left'
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "header",
       config: this.props.top,
-      me: this
-    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      me: this,
+      className: 'header',
+      dir: 'top'
+    }), /*#__PURE__*/React__default["default"].createElement("main", null, /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.left,
       me: this,
-      className: 'left'
+      className: 'left',
+      dir: 'left'
     }), /*#__PURE__*/React__default["default"].createElement("main", {
       className: 'body'
-    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeType, {
+    }, this.renderMe?.() ?? this.props.children), /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.right,
       me: this,
-      className: 'right'
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      className: 'right',
+      dir: 'right'
+    })), /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "footer",
       config: this.props.bottom,
-      me: this
-    })), /*#__PURE__*/React__default["default"].createElement(FreeType, {
+      me: this,
+      dir: 'bottom'
+    })), /*#__PURE__*/React__default["default"].createElement(FreeTypeWithSlider, {
       tag: "div",
       config: this.props.end,
       me: this,
-      className: 'end'
+      className: 'end',
+      dir: 'right'
     }), this.mask?.());
   }
 }
@@ -4937,6 +5097,7 @@ class Slider extends React__default["default"].Component {
     this.sliderRef = /*#__PURE__*/React__default["default"].createRef();
   }
   stop = e => {
+    po('stop', this);
     this.sliderRef.current.classList.remove('resizing');
     document.body.style.cursor = 'default';
     window.removeEventListener('mousemove', this.move);
@@ -4945,6 +5106,7 @@ class Slider extends React__default["default"].Component {
   move = ({
     clientX
   }) => {
+    po('move');
     const {
       th,
       selectedCols,
@@ -4962,6 +5124,7 @@ class Slider extends React__default["default"].Component {
     });
   };
   start(thPRef, column) {
+    po('start', this.start);
     const selectedCols = [...this.props.table.colGroupRef.current.children].slice(column.columnNo, column.columnNo + (column.colSpan ?? 1));
     const totalWidth = selectedCols.reduce((aco, {
       offsetWidth
@@ -5924,8 +6087,8 @@ class JRFields extends JRWindow {
       content = /*#__PURE__*/React__default["default"].createElement(StyledColumnValue, {
         className: 'jr-column-value',
         style: {
-          gridColumn: label == null ? 'span 2' : null,
-          padding: column.render ? '4px 0' : null
+          gridColumn: label == null ? 'span 2' : null
+          // ,padding:column.render?'4px 0':null
         }
       }, column.render ? column.render.bind(this)({
         onChange,
@@ -6423,13 +6586,14 @@ class JRSelect extends JROptions {
       multiple,
       size
     } = this.props;
+    const value = this.getValue() ?? (multiple ? [] : '');
     const options = [...(this.getOptions() ?? [])];
-    if (multiple != true && showBlank != false) options.unshift({
-      [valueName]: '',
+    if (!multiple && (showBlank != false || value == '')) options.unshift({
+      [valueName]: null,
       [labelName]: ''
     });
     return /*#__PURE__*/React__default["default"].createElement(StyledSelect, {
-      value: this.getValue() ?? (multiple ? [] : ''),
+      value: value,
       className: 'jr-select',
       onChange: e => {
         if (multiple) {
@@ -6437,7 +6601,7 @@ class JRSelect extends JROptions {
           this.setValue(selectedIndex.length ? selectedIndex.map(index => options[index][valueName]) : null);
         } else {
           const selectedIndex = e.target.selectedOptions[0].index;
-          this.setValue(selectedIndex ? options[selectedIndex][valueName] : null);
+          this.setValue(selectedIndex > -1 ? options[selectedIndex][valueName] : null);
         }
       },
       size: size,
@@ -6447,7 +6611,7 @@ class JRSelect extends JROptions {
         value: record[valueName],
         key: key
       };
-      if (multiple && this.getValue()?.indexOf(record[valueName]) > -1 || this.getValue() == record[valueName]) {
+      if (multiple && value?.indexOf(record[valueName]) > -1 || value == record[valueName]) {
         props.className = 'selected';
       }
       return /*#__PURE__*/React__default["default"].createElement(StyledOption, props, record[labelName]);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "jrs-react",
-	"version": "1.2.34",
+	"version": "1.2.36",
 	"description": "",
 	"main": "build/index.js",
 	"module": "build/index.es.js",

package/src/components/JRFields/JRFields.jsx

@@ -387,7 +387,7 @@ export default class JRFields extends JRWindow {
             content=<StyledColumnValue className={'jr-column-value'}
                 style={{
                     gridColumn:label==null?'span 2':null
-                    ,padding:column.render?'4px 0':null
+                    // ,padding:column.render?'4px 0':null
                 }}
             >
                 {

package/src/components/JRFrame/JRFrame.jsx

@@ -1,21 +1,26 @@
-import React from "react";
+import React, { forwardRef, useRef } from "react";
 import styled from "styled-components";
 import JRSubmit from "../JRSubmit";
-import { random } from "../JRUtils";
+import { po, random } from "../JRUtils";
+import Slider from "./Slider";
 
-export const FreeType=({tag:Tag,config,me,className})=>{
+export const FreeType=forwardRef(function({tag:Tag,config,me,className}, ref){
+    let style
+    const setStyle=function(_style){
+        style=_style
+    }
     if(typeof config==='function'){
-        let style
-        const setStyle=function(_style){
-            style=_style
-        }
         const content=config.bind(me)({setStyle})
-        return <Tag className={className} style={style}>{content}</Tag>
+        return <Tag className={className} style={style} ref={ref}>{content}</Tag>
+    }else if(config?.render){
+        const content=config.render.bind(me)({setStyle})
+        return <Tag className={className} style={style} ref={ref}>{content}</Tag>
     }else if(typeof config==='string'){
-        return <Tag className={className}>{config}</Tag>
+        return <Tag className={className} ref={ref}>{config}</Tag>
     }
+})
+
 
-}
 
 const StyledJRFrame=styled.div`
     color:#525252;
@@ -55,6 +60,27 @@ const StyledJRFrame=styled.div`
 
     }
 `
+
+function FreeTypeWithSlider({tag,config,me,className,dir}){
+    if(config){
+        if(config.resizable){
+            const ref=useRef()
+            const arr=[
+                <FreeType tag={tag} config={config} me={me} className={className} ref={ref} key={'frame'}/>
+                ,<Slider contenerRef={ref} dir={dir}  key={'slider'}/>
+            ]
+            po('right',dir)
+            if(['right'].indexOf(dir)>-1 || ['bottom'].indexOf(dir)>-1 ){
+                return arr.reverse()
+            }else{
+                return arr
+            }
+        }else{
+    
+            return <FreeType tag={tag} config={config} me={me} className={className}/>
+        }
+    }
+}
 export default class JRFrame extends JRSubmit {
     rid=random(99999,10000)
     mask=this.props.mask
@@ -74,19 +100,19 @@ export default class JRFrame extends JRSubmit {
         return <StyledJRFrame  id={this.props.id} style={this.props.style} 
             className={`jr-frame ${(this.props.popup!==true  )? this.props.className:''}`} 
         >
-            <FreeType tag='div' config={this.props.start} me={this} className={'start'}/>
+            <FreeTypeWithSlider  tag='div' config={this.props.start} me={this} className={'start'} dir={'left'}/>
             <main>
-                <FreeType tag='header' config={this.props.top} me={this}/>
+                <FreeTypeWithSlider  tag='header' config={this.props.top} me={this} className={'header'} dir={'top'}/>
                 <main>
-                    <FreeType tag='div' config={this.props.left} me={this} className={'left'}/>
+                    <FreeTypeWithSlider  tag='div' config={this.props.left} me={this} className={'left'} dir={'left'}/>
                     <main className={'body'}> 
                         {this.renderMe?.() ?? this.props.children}
                     </main>
-                    <FreeType tag='div' config={this.props.right} me={this} className={'right'}/>
+                    <FreeTypeWithSlider  tag='div' config={this.props.right} me={this} className={'right'} dir={'right'}/>
                 </main>
-                <FreeType tag='footer' config={this.props.bottom} me={this}/>
+                <FreeTypeWithSlider tag='footer' config={this.props.bottom} me={this} dir={'bottom'}/>
             </main>
-            <FreeType tag='div' config={this.props.end} me={this} className={'end'}/>
+            <FreeTypeWithSlider  tag='div' config={this.props.end} me={this} className={'end'} dir={'right'}/>
             {this.mask?.()}
         </StyledJRFrame>
     }

package/src/components/JRFrame/Slider.jsx

@@ -0,0 +1,79 @@
+import React from "react";
+import styled from "styled-components";
+import { po } from "../JRUtils";
+
+const StyledSlider=styled.div`
+    background:#2d2d2d;
+    flex-basis:11px;
+    user-select: none;
+    cursor: ${({$dir})=>$dir==='left'||$dir==='right'?'col-resize':'row-resize'} ;
+`
+export default class Slider extends React.Component {
+    ref=React.createRef()
+
+    resize={
+        left:({clientX})=>{
+            const ref=this.props.contenerRef.current
+            let width=clientX-this.frame.x-this.frame.shw
+            if(width<0)width=0
+            ref.style.flexBasis=`${width}px`
+        }
+        ,right:({clientX})=>{
+            const ref=this.props.contenerRef.current
+            let width=this.frame.x2-clientX-this.frame.shw
+            if(width<0)width=0
+            po('width',width)
+            ref.style.flexBasis=`${width}px`
+        }
+        ,top:({clientY})=>{
+            po('top')
+            const ref=this.props.contenerRef.current
+            let height=clientY-this.frame.y-this.frame.shh
+            po('height',height)
+            // if(width<0)width=0
+            ref.style.flexBasis=`${height}px`
+        }
+        ,bottom:({clientY})=>{
+            po('bottom')
+            const ref=this.props.contenerRef.current
+            let height=this.frame.w2-clientY-this.frame.shh
+            // clientY-this.frame.y-this.frame.shh
+            // po('height',height)
+            // // if(width<0)width=0
+            ref.style.flexBasis=`${height}px`
+        }
+    }
+    stop=(e)=>{
+        po('stop',this.stop)
+        document.body.style.cursor='default'
+        window.removeEventListener('mousemove',this.move)
+        window.removeEventListener('mouseup',this.stop)
+    }
+    move=(e)=>{
+        this.resize[this.props.dir](e)
+    }
+    start=({clientX})=>{
+        console.clear()
+        const ref=this.props.contenerRef.current
+        const {x,y,width,height,...other}=ref.getBoundingClientRect()
+        po('other',ref.getBoundingClientRect())
+        po('ref.getBoundingClientRect()',this.ref.current.getBoundingClientRect())
+        const {width:sw,height:sh}=this.ref.current.getBoundingClientRect()
+        this.frame={
+            x,y
+            ,shw:sw/2
+            ,shh:sh/2
+            ,x2:x+width
+            ,w2:y+height
+        }
+
+        document.body.style.cursor='col-resize'
+        window.addEventListener('mousemove',this.move)
+        window.addEventListener('mouseup',this.stop)
+    }
+
+    render(){
+        return <StyledSlider onMouseDown={this.start} ref={this.ref} $dir={this.props.dir}>
+        </StyledSlider>
+    }
+}

package/src/components/JRInput/JRSelect.jsx

@@ -22,10 +22,12 @@ const StyledSelect=styled.select`
 export default class JRSelect extends JROptions{
     renderer(){
         const {showBlank,valueName='value',labelName='label',multiple,size}=this.props
+        const value=this.getValue()??(multiple?[]:'')
         const options=[...this.getOptions()??[]]
-        if(multiple!=true && showBlank!=false)options.unshift({[valueName]:'',[labelName]:''})
+        if(!multiple && (showBlank!=false || value==''))options.unshift({[valueName]:null,[labelName]:''})
+
         return <StyledSelect 
-            value={this.getValue()??(multiple?[]:'')}
+            value={value}
             className={'jr-select'}
             onChange={(e)=>{
                 if(multiple){
@@ -35,8 +37,9 @@ export default class JRSelect extends JROptions{
                         :null
                     )
                 }else{
+                    
                     const selectedIndex=e.target.selectedOptions[0].index
-                    this.setValue(selectedIndex?options[selectedIndex][valueName]:null)
+                    this.setValue(selectedIndex>-1 ?options[selectedIndex][valueName]:null)
                 }
             }}
             size={size}
@@ -49,8 +52,8 @@ export default class JRSelect extends JROptions{
                         ,key:key
                     }
                     if(
-                        (multiple && this.getValue()?.indexOf(record[valueName])>-1)
-                        || this.getValue()==record[valueName]
+                        (multiple && value?.indexOf(record[valueName])>-1)
+                        || value==record[valueName]
                     ){
                         props.className='selected'
                     }

package/src/components/JRMask/JRMask.jsx

@@ -19,6 +19,12 @@ const css=`
     z-index: 20000;
     overflow: hidden;
     background:#000000aa;
+    animation: divDelay .3s;
+    @keyframes divDelay {
+        from {background:transparent;visibility:hidden;}
+        40% {background:transparent;visibility:hidden;}
+        to {background:#000000aa;visibility:visible;}
+    }
     
     .cs-loader-inner {
 		transform: translateY(-30%);
@@ -111,10 +117,10 @@ const StyledDialogMask = styled.dialog`
 
     &:modal  {
         outline: 0;
-        animation: myfirst .3s;
-        @keyframes myfirst {
+        animation: modalDelay .3s;
+        @keyframes modalDelay {
             from {background:transparent;visibility:hidden;}
-            99% {background:transparent;visibility:hidden;}
+            40% {background:transparent;visibility:hidden;}
             to {background:#000000aa;visibility:visible;}
         }
     }

package/src/components/JRTable/Slider.jsx

@@ -1,5 +1,6 @@
 import React from "react"
 import styled from "styled-components"
+import { po } from "../JRUtils";
 
 const StyledSlider=styled.div`
     position: absolute;
@@ -23,12 +24,15 @@ export default class Slider extends React.Component {
     }
 
     stop=(e)=>{
+        po('stop',this)
         this.sliderRef.current.classList.remove('resizing');
         document.body.style.cursor='default'
         window.removeEventListener('mousemove',this.move)
+
         window.removeEventListener('mouseup',this.stop)
     }
     move=({clientX})=>{
+        po('move')
         const {th,selectedCols,widthRates}=this.data
         const {left}=th.getBoundingClientRect()
 
@@ -44,6 +48,7 @@ export default class Slider extends React.Component {
         })
     }
     start(thPRef,column){
+        po('start',this.start)
         const selectedCols=[...this.props.table.colGroupRef.current.children].slice(column.columnNo,column.columnNo+(column.colSpan??1))
         const totalWidth=selectedCols.reduce((aco,{offsetWidth})=>aco+offsetWidth,0)
         const widthRates=selectedCols.map(({offsetWidth})=>{
@@ -60,6 +65,8 @@ export default class Slider extends React.Component {
         document.body.style.cursor='col-resize'
         window.addEventListener('mousemove',this.move)
         window.addEventListener('mouseup',this.stop)
+
+        
             
     }