dinocollab-core 2.1.22 → 2.1.24

package/dist/form/index.js

@@ -1,2 +1,2 @@
-export{default as FormValidator,SingleRuleValidate,createFormValidator,mapRuleOptions}from"../src/form/validator.js";export{default as DinoForm}from"../src/form/dino-form.js";export{convertFormDataToJson,getErrorMessage,validateCsvModel}from"../src/form/helpers.js";export{formField,formPreSubmit,formValidate,getFormFields,getFormPreSubmit,getFormValidators,registerForm}from"../src/form/decorator.js";export{DecoratorField,DecoratorForm,createDecoratorForm}from"../src/form/decorator.form.js";
+export{default as FormValidator,SingleRuleValidate,createFormValidator,mapRuleOptions}from"../src/form/validator.js";export{default as DinoForm}from"../src/form/dino-form.js";export{convertFormDataToJson,getErrorMessage,validateCsvModel}from"../src/form/helpers.js";export{formField,formPreSubmit,formValidate,getFormFields,getFormPreSubmit,getFormValidators,isFormRegistered,registerForm}from"../src/form/decorator.js";export{DecoratorField,DecoratorForm,createDecoratorForm}from"../src/form/decorator.form.js";
 //# sourceMappingURL=index.js.map

package/dist/src/data-view/animation-switch.js

@@ -0,0 +1,2 @@
+import{defineProperty as t,slicedToArray as e}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as n}from"react/jsx-runtime";import{styled as o}from"@mui/material";import{useRef as a,useState as r,useLayoutEffect as c,useMemo as s}from"react";import{EViewMode as l}from"./view-mode.types.js";var u=function(t){var o=a(null),u=a(null),p=a(null),h=r("auto"),m=e(h,2),v=m[0],g=m[1];c((function(){var e=function(){var e,i,n,o,a=null!==(e=null===(i=u.current)||void 0===i?void 0:i.offsetHeight)&&void 0!==e?e:0,r=null!==(n=null===(o=p.current)||void 0===o?void 0:o.offsetHeight)&&void 0!==n?n:0,c=t.mode===l.List?a:r;g(c>0?c:"auto")};e();var i=new ResizeObserver(e);return u.current&&i.observe(u.current),p.current&&i.observe(p.current),function(){i.disconnect()}}),[t.mode,t.listNode,t.moduleNode,t.autoHeight]);var b=s((function(){var e=d.root,i=d.pane,n=d.paneList,o=d.paneModule,a=d.visible,r=d.hidden,c=d.autoHeight;return{root:[e,t.autoHeight?c:""],paneList:[i,n,t.mode===l.List?a:r],paneModule:[i,o,t.mode===l.Module?a:r]}}),[t.mode,t.autoHeight]);return i(f,{className:b.root.join(" "),children:n("div",{ref:o,className:d.content,style:"auto"===v?void 0:{height:"".concat(v,"px")},children:[i("div",{ref:u,className:b.paneList.join(" "),children:t.listNode}),i("div",{ref:p,className:b.paneModule.join(" "),children:t.moduleNode})]})})},d={root:"AnimationSwitch-root",content:"AnimationSwitch-content",autoHeight:"AnimationSwitch-auto-height",pane:"AnimationSwitch-pane",paneList:"AnimationSwitch-pane-list",paneModule:"AnimationSwitch-pane-module",visible:"AnimationSwitch-visible",hidden:"AnimationSwitch-hidden"},p=function(t,e){return"".concat((null==e?void 0:e.prefix)||"",".").concat(d[t]).concat((null==e?void 0:e.suffix)||"")},h={duration:.35,ease:[.25,.1,.25,1]},m="opacity ".concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),") , transform ").concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),")"),f=o("div")((function(e){var i=e.theme;return t(t(t(t(t(t(t({},p("root",{prefix:"&"}),{width:"100%"}),p("content"),{position:"relative",width:"100%",transition:"height ".concat(h.duration,"s cubic-bezier(").concat(h.ease.join(","),")")}),p("pane"),{position:"absolute",top:0,left:0,width:"100%",willChange:"opacity, transform",transition:m,paddingLeft:i.spacing(.5),paddingRight:i.spacing(.5)}),p("visible"),{opacity:1,transform:"translateY(0px) scale(1)",pointerEvents:"auto"}),p("hidden"),{opacity:0,transform:"translateY(".concat(i.spacing(2),") scale(0.98)"),pointerEvents:"none"}),p("autoHeight",{prefix:"&"}),{overflowY:"hidden"}),"&:not(".concat(p("autoHeight"),")"),t(t({height:"100%"},p("content"),{height:"100%"}),p("pane"),{height:"100%",display:"flex"}))}));export{f as AnimationSwitchStyled,d as animationSwitchClasses,u as default};
+//# sourceMappingURL=animation-switch.js.map

package/dist/src/data-view/animation-switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"animation-switch.js","sources":["../../../src/data-view/animation-switch.tsx"],"sourcesContent":["import { styled } from '@mui/material'\r\nimport { FC, ReactNode, useLayoutEffect, useMemo, useRef, useState } from 'react'\r\nimport { EViewMode } from './view-mode.types'\r\n\r\ninterface IProps {\r\n  mode: EViewMode\r\n  moduleNode: ReactNode\r\n  listNode: ReactNode\r\n  autoHeight?: boolean\r\n}\r\n\r\nconst AnimationSwitch: FC<IProps> = (props) => {\r\n  // refs to measure heights\r\n  const wrapperRef = useRef<HTMLDivElement | null>(null)\r\n  const listRef = useRef<HTMLDivElement | null>(null)\r\n  const moduleRef = useRef<HTMLDivElement | null>(null)\r\n  const [height, setHeight] = useState<number | 'auto'>('auto')\r\n\r\n  useLayoutEffect(() => {\r\n    const measure = () => {\r\n      const listH = listRef.current?.offsetHeight ?? 0\r\n      const moduleH = moduleRef.current?.offsetHeight ?? 0\r\n      const visibleH = props.mode === EViewMode.List ? listH : moduleH\r\n      // if both are 0, keep auto\r\n      setHeight(visibleH > 0 ? visibleH : 'auto')\r\n    }\r\n\r\n    // initial measure (after layout)\r\n    measure()\r\n\r\n    // observe dynamic content changes\r\n    const ro = new ResizeObserver(measure)\r\n    if (listRef.current) ro.observe(listRef.current)\r\n    if (moduleRef.current) ro.observe(moduleRef.current)\r\n\r\n    return () => {\r\n      ro.disconnect()\r\n    }\r\n  }, [props.mode, props.listNode, props.moduleNode, props.autoHeight])\r\n\r\n  const classes = useMemo(() => {\r\n    const { root, pane, paneList, paneModule, visible, hidden, autoHeight } = animationSwitchClasses\r\n    const rootClasses = [root, props.autoHeight ? autoHeight : '']\r\n    const paneListClasses = [pane, paneList, props.mode === EViewMode.List ? visible : hidden]\r\n    const paneModuleClasses = [pane, paneModule, props.mode === EViewMode.Module ? visible : hidden]\r\n    return { root: rootClasses, paneList: paneListClasses, paneModule: paneModuleClasses }\r\n  }, [props.mode, props.autoHeight])\r\n\r\n  return (\r\n    <AnimationSwitchStyled className={classes.root.join(' ')}>\r\n      <div\r\n        ref={wrapperRef}\r\n        className={animationSwitchClasses.content}\r\n        // set explicit height when measured\r\n        style={height === 'auto' ? undefined : { height: `${height}px` }}\r\n      >\r\n        <div ref={listRef} className={classes.paneList.join(' ')}>\r\n          {props.listNode}\r\n        </div>\r\n        <div ref={moduleRef} className={classes.paneModule.join(' ')}>\r\n          {props.moduleNode}\r\n        </div>\r\n      </div>\r\n    </AnimationSwitchStyled>\r\n  )\r\n}\r\nexport default AnimationSwitch\r\n\r\nexport const animationSwitchClasses = {\r\n  root: 'AnimationSwitch-root',\r\n  content: 'AnimationSwitch-content',\r\n  autoHeight: 'AnimationSwitch-auto-height',\r\n  pane: 'AnimationSwitch-pane',\r\n  paneList: 'AnimationSwitch-pane-list',\r\n  paneModule: 'AnimationSwitch-pane-module',\r\n  visible: 'AnimationSwitch-visible',\r\n  hidden: 'AnimationSwitch-hidden'\r\n}\r\n\r\nconst getClasses = (key: keyof typeof animationSwitchClasses, options?: { prefix?: string; suffix?: string }) => {\r\n  return `${options?.prefix || ''}.${animationSwitchClasses[key]}${options?.suffix || ''}`\r\n}\r\n\r\nconst TRANSITION = { duration: 0.35, ease: [0.25, 0.1, 0.25, 1] }\r\nconst TRANSITION_CSS = `opacity ${TRANSITION.duration}s cubic-bezier(${TRANSITION.ease.join(',')}) , transform ${\r\n  TRANSITION.duration\r\n}s cubic-bezier(${TRANSITION.ease.join(',')})`\r\n\r\nexport const AnimationSwitchStyled = styled('div')(({ theme }) => ({\r\n  [getClasses('root', { prefix: '&' })]: { width: '100%' },\r\n  [getClasses('content')]: {\r\n    position: 'relative',\r\n    width: '100%',\r\n    transition: `height ${TRANSITION.duration}s cubic-bezier(${TRANSITION.ease.join(',')})`\r\n  },\r\n  // base pane styling for both list/module panes\r\n  [getClasses('pane')]: {\r\n    position: 'absolute',\r\n    top: 0,\r\n    left: 0,\r\n    width: '100%',\r\n    willChange: 'opacity, transform',\r\n    transition: TRANSITION_CSS,\r\n    paddingLeft: theme.spacing(0.5),\r\n    paddingRight: theme.spacing(0.5)\r\n  },\r\n  // visible/hidden state classes\r\n  [getClasses('visible')]: {\r\n    opacity: 1,\r\n    transform: 'translateY(0px) scale(1)',\r\n    pointerEvents: 'auto'\r\n  },\r\n  [getClasses('hidden')]: {\r\n    opacity: 0,\r\n    transform: `translateY(${theme.spacing(2)}) scale(0.98)`,\r\n    pointerEvents: 'none'\r\n  },\r\n  // autoHeight mode\r\n  [getClasses('autoHeight', { prefix: '&' })]: { overflowY: 'hidden' },\r\n  [`&:not(${getClasses('autoHeight')})`]: {\r\n    height: '100%',\r\n    [getClasses('content')]: { height: '100%' },\r\n    [getClasses('pane')]: { height: '100%', display: 'flex' }\r\n  }\r\n}))\r\n"],"names":["AnimationSwitch","props","wrapperRef","useRef","listRef","moduleRef","_useState","useState","_useState2","_slicedToArray","height","setHeight","useLayoutEffect","measure","_listRef$current$offs","_listRef$current","_moduleRef$current$of","_moduleRef$current","listH","current","offsetHeight","moduleH","visibleH","mode","EViewMode","List","ro","ResizeObserver","observe","disconnect","listNode","moduleNode","autoHeight","classes","useMemo","root","animationSwitchClasses","pane","paneList","paneModule","visible","hidden","Module","_jsx","AnimationSwitchStyled","className","join","children","_jsxs","ref","content","style","undefined","concat","getClasses","key","options","prefix","suffix","TRANSITION","duration","ease","TRANSITION_CSS","styled","_ref","theme","_defineProperty","width","position","transition","top","left","willChange","paddingLeft","spacing","paddingRight","opacity","transform","pointerEvents","overflowY","display"],"mappings":"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"}

package/dist/src/data-view/create.data-view.js

@@ -1,2 +1,2 @@
-import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as l,defineProperty as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{styled as u,Box as v,Stack as f}from"@mui/material";import{SortButton as p}from"./ui.units.js";import{createViewMode as g}from"./create.view-mode.js";import{defaultViewMode as h,ViewModeButtons as c}from"./view-mode.units.js";import{getViewModeFromURL as C,syncViewModeToURL as m}from"./query-param-url.js";import{defaultFilterBarState as w,DataViewContext as S}from"./context.js";import{createFilterBar as y}from"./create.filter-bar.js";import M from"./scroll-tracking.js";import{createPaginationBar as B}from"./create.pagination-bar.js";import{createPopperPanel as P}from"./create.popper-panel.js";import b from"./create.active-filters-panel.js";function j(u){var j=y(),x=P(),F=b(),V=g(u.viewMode),T=B();return function(){function g(e){var i;return o(this,g),i=l(this,g,[e]),n(i,"mergeConfig",(function(e){var t,o,l,n,r=e.slots;i.configCache={filterBar:Object.assign({},u.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},u.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(t=null!==(o=null==r||null===(l=r.paginationBarConfigs)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==o?o:null===(n=u.paginationBar)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==t&&t,scrollTracking:Object.assign({},u.scrollTracking,null==r?void 0:r.scrollTracking)}})),n(i,"configCache",{}),n(i,"refFilterButton",null),n(i,"refSortButton",null),n(i,"renderFooter",(function(){var e,o,l,n,r=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{};return a(H,t(t({},r.wrapProps),{},{children:!1!==r.enablePagination&&a(T,t({count:null!==(o=null===(l=i.props.data)||void 0===l?void 0:l.totalItems)&&void 0!==o?o:0,defaultFilter:null===(n=i.internalConfig.filterBar)||void 0===n?void 0:n.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))})),n(i,"onViewModeChangeHandler",(function(e){i.setState({viewMode:e},(function(){var t,o;if(i.props.syncViewModeToURL){var l,n,r,a,s=null!==(l=null!==(n=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==n?n:null===(a=u.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==l?l:h;m({viewMode:e,defaultViewMode:s})}null===(t=(o=i.props).onViewModeChange)||void 0===t||t.call(o,e)}))})),n(i,"onKeywordChangeHandler",(function(e){return i.setState({keyword:e})})),n(i,"onScrollChangeHandler",(function(e){return i.setState({scrolled:e.isScrolled})})),n(i,"onPopperPanelChangeHandler",(function(e,t){return i.setState({anchorEl:e,area:t})})),n(i,"onClearHandler",(function(){return i.setState(w)})),n(i,"onPanelCloseHandler",(function(){i.setState({anchorEl:null,area:void 0,keyword:""})})),n(i,"onFilterStateChangeHandler",(function(e){i.props.filter||i.setState(t(t({},w),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(w)})),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(g,d),i(g,[{key:"getDefaultState",value:function(e){var i,o,l,n,r,a,s=null!==(i=null!==(o=null===(l=e.slots)||void 0===l||null===(l=l.viewModeConfigs)||void 0===l?void 0:l.defaultValue)&&void 0!==o?o:null===(n=u.viewMode)||void 0===n?void 0:n.defaultValue)&&void 0!==i?i:h,d=e.syncViewModeToURL?C({defaultViewMode:s}):s;return t(t({},w),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,t,o,l,n=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(t=this.props.slots)||void 0===t?void 0:t.filterBarConfigs),r=JSON.stringify(null===(o=e.slots)||void 0===o?void 0:o.viewModeConfigs)!==JSON.stringify(null===(l=this.props.slots)||void 0===l?void 0:l.viewModeConfigs);return(n||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,o,l,n,d,u,g,h,C,m,w,y,B,P,b,H,I={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(S.Provider,{value:I,children:[(null===(i=this.internalConfig.filterBar)||void 0===i?void 0:i.enableSticky)&&a(M,t({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(o=this.props.slots)||void 0===o||null===(o=o.filterSlots)||void 0===o?void 0:o.above,a(j,{id:null===(l=this.internalConfig.scrollTracking)||void 0===l?void 0:l.elementId,slots:t(t({},null===(n=this.props.slots)||void 0===n?void 0:n.primaryInputSlots),{},{right:r(s,{children:[(null===(d=this.internalConfig.filterBar)||void 0===d?void 0:d.enableSort)&&a(p,{}),null===(u=this.props.slots)||void 0===u||null===(u=u.primaryInputSlots)||void 0===u?void 0:u.right]})}),children:a(x,{})}),null===(g=this.props.slots)||void 0===g||null===(g=g.filterSlots)||void 0===g?void 0:g.below,null===(h=this.props.slots)||void 0===h||null===(h=h.activeFiltersPanelSlots)||void 0===h?void 0:h.above,r(k,{children:[a(c,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.left,r(f,{flexDirection:"row",sx:{flexWrap:"wrap",alignItems:"center",gap:1,flexGrow:1},children:[a(F,{loading:this.props.loading}),a(v,{sx:{display:"flex",alignItems:"center",gap:1,flexGrow:1,justifyContent:"end"},children:this.internalConfig.enablePaginationTop&&a(T,t({count:null!==(m=null===(w=this.props.data)||void 0===w?void 0:w.totalItems)&&void 0!==m?m:0,defaultFilter:null===(y=this.internalConfig.filterBar)||void 0===y?void 0:y.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(B=this.props.slots)||void 0===B||null===(B=B.activeFiltersPanelSlots)||void 0===B?void 0:B.right]}),null===(P=this.props.slots)||void 0===P||null===(P=P.activeFiltersPanelSlots)||void 0===P?void 0:P.below,a(V,{data:null!==(b=null===(H=this.props.data)||void 0===H?void 0:H.items)&&void 0!==b?b:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,slots:this.internalConfig.viewMode}),this.renderFooter()]})}}])}()}var k=u(v)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px",marginBottom:"8px",minHeight:"var(--filter-bar-height, 40px)"}),H=u(v)({display:"flex",justifyContent:"flex-end",width:"100%"});export{j as default};
+import{inherits as e,createClass as i,objectSpread2 as t,classCallCheck as o,callSuper as n,defineProperty as l}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as r,jsxs as a,Fragment as s}from"react/jsx-runtime";import{Component as d}from"react";import{styled as u,Box as v,Stack as f}from"@mui/material";import{SortButton as p}from"./ui.units.js";import{createViewMode as g}from"./create.view-mode.js";import{defaultViewMode as h,ViewModeButtons as c}from"./view-mode.units.js";import{getViewModeFromURL as C,syncViewModeToURL as m}from"./query-param-url.js";import{defaultFilterBarState as w,DataViewContext as S}from"./context.js";import{createFilterBar as y}from"./create.filter-bar.js";import M from"./scroll-tracking.js";import{createPaginationBar as B}from"./create.pagination-bar.js";import{createPopperPanel as H}from"./create.popper-panel.js";import P from"./create.active-filters-panel.js";function b(u){var b=y(),k=H(),F=P(),V=g(u.viewMode),T=B();return function(){function g(e){var i;return o(this,g),i=n(this,g,[e]),l(i,"mergeConfig",(function(e){var t,o,n,l,r=e.slots;i.configCache={filterBar:Object.assign({},u.filterBar,null==r?void 0:r.filterBarConfigs),viewMode:null==r?void 0:r.viewModeConfigs,paginationBar:Object.assign({},u.paginationBar,null==r?void 0:r.paginationBarConfigs),enablePaginationTop:null!==(t=null!==(o=null==r||null===(n=r.paginationBarConfigs)||void 0===n?void 0:n.enablePaginationTop)&&void 0!==o?o:null===(l=u.paginationBar)||void 0===l?void 0:l.enablePaginationTop)&&void 0!==t&&t,scrollTracking:Object.assign({},u.scrollTracking,null==r?void 0:r.scrollTracking),autoHeight:e.autoHeight||u.autoHeight||!1}})),l(i,"configCache",{}),l(i,"refFilterButton",null),l(i,"refSortButton",null),l(i,"renderFooter",(function(){var e,o,n,l,a=(null===(e=i.props.slots)||void 0===e?void 0:e.footerProps)||{};return r(j,t(t({},a.wrapProps),{},{children:!1!==a.enablePagination&&r(T,t({count:null!==(o=null===(n=i.props.data)||void 0===n?void 0:n.totalItems)&&void 0!==o?o:0,defaultFilter:null===(l=i.internalConfig.filterBar)||void 0===l?void 0:l.defaultValue,filter:i.filterState,onChange:i.onFilterStateChangeHandler},i.internalConfig.paginationBar))}))})),l(i,"onViewModeChangeHandler",(function(e){i.setState({viewMode:e},(function(){var t,o;if(i.props.syncViewModeToURL){var n,l,r,a,s=null!==(n=null!==(l=null===(r=i.internalConfig.viewMode)||void 0===r?void 0:r.defaultValue)&&void 0!==l?l:null===(a=u.viewMode)||void 0===a?void 0:a.defaultValue)&&void 0!==n?n:h;m({viewMode:e,defaultViewMode:s})}null===(t=(o=i.props).onViewModeChange)||void 0===t||t.call(o,e)}))})),l(i,"onKeywordChangeHandler",(function(e){return i.setState({keyword:e})})),l(i,"onScrollChangeHandler",(function(e){return i.setState({scrolled:e.isScrolled})})),l(i,"onPopperPanelChangeHandler",(function(e,t){return i.setState({anchorEl:e,area:t})})),l(i,"onClearHandler",(function(){return i.setState(w)})),l(i,"onPanelCloseHandler",(function(){i.setState({anchorEl:null,area:void 0,keyword:""})})),l(i,"onFilterStateChangeHandler",(function(e){i.props.filter||i.setState(t(t({},w),{},{filterState:e})),i.props.onFilterChange&&i.props.onFilterChange(e),i.props.filter&&i.setState(w)})),i.mergeConfig(e),i.state=i.getDefaultState(e),i}return e(g,d),i(g,[{key:"getDefaultState",value:function(e){var i,o,n,l,r,a,s=null!==(i=null!==(o=null===(n=e.slots)||void 0===n||null===(n=n.viewModeConfigs)||void 0===n?void 0:n.defaultValue)&&void 0!==o?o:null===(l=u.viewMode)||void 0===l?void 0:l.defaultValue)&&void 0!==i?i:h,d=e.syncViewModeToURL?C({defaultViewMode:s}):s;return t(t({},w),{},{filterState:null!==(r=null===(a=this.internalConfig.filterBar)||void 0===a?void 0:a.defaultValue)&&void 0!==r?r:{},viewMode:d})}},{key:"filterState",get:function(){var e;return null!==(e=this.props.filter)&&void 0!==e?e:this.state.filterState}},{key:"viewMode",get:function(){var e;return null!==(e=this.props.viewMode)&&void 0!==e?e:this.state.viewMode}},{key:"internalConfig",get:function(){return this.configCache}},{key:"shouldComponentUpdate",value:function(e){var i,t,o,n,l=JSON.stringify(null===(i=e.slots)||void 0===i?void 0:i.filterBarConfigs)!==JSON.stringify(null===(t=this.props.slots)||void 0===t?void 0:t.filterBarConfigs),r=JSON.stringify(null===(o=e.slots)||void 0===o?void 0:o.viewModeConfigs)!==JSON.stringify(null===(n=this.props.slots)||void 0===n?void 0:n.viewModeConfigs);return(l||r)&&this.mergeConfig(e),!0}},{key:"render",value:function(){var e,i,o,n,l,d,u,g,h,C,m,w,y,B,H,P,j,I={keyword:this.state.keyword.trim(),filterBarConfigs:null!==(e=this.internalConfig.filterBar)&&void 0!==e?e:{},filterState:this.filterState,anchorEl:this.state.anchorEl,area:this.state.area,viewMode:this.state.viewMode,scrolled:this.state.scrolled,onFilterStateChange:this.onFilterStateChangeHandler,onKeywordChange:this.onKeywordChangeHandler,onPopperPanelChange:this.onPopperPanelChangeHandler,onPanelClose:this.onPanelCloseHandler,onClear:this.onClearHandler};return r(S.Provider,{value:I,children:a(f,{sx:{height:"100%",flex:1},children:[(null===(i=this.internalConfig.filterBar)||void 0===i?void 0:i.enableSticky)&&r(M,t({onChange:this.onScrollChangeHandler},this.internalConfig.scrollTracking)),null===(o=this.props.slots)||void 0===o||null===(o=o.filterSlots)||void 0===o?void 0:o.above,r(b,{id:null===(n=this.internalConfig.scrollTracking)||void 0===n?void 0:n.elementId,slots:t(t({},null===(l=this.props.slots)||void 0===l?void 0:l.primaryInputSlots),{},{right:a(s,{children:[(null===(d=this.internalConfig.filterBar)||void 0===d?void 0:d.enableSort)&&r(p,{}),null===(u=this.props.slots)||void 0===u||null===(u=u.primaryInputSlots)||void 0===u?void 0:u.right]})}),children:r(k,{})}),null===(g=this.props.slots)||void 0===g||null===(g=g.filterSlots)||void 0===g?void 0:g.below,null===(h=this.props.slots)||void 0===h||null===(h=h.activeFiltersPanelSlots)||void 0===h?void 0:h.above,a(x,{children:[r(c,{value:this.state.viewMode,onChange:this.onViewModeChangeHandler}),null===(C=this.props.slots)||void 0===C||null===(C=C.activeFiltersPanelSlots)||void 0===C?void 0:C.left,a(f,{flexDirection:"row",sx:{flexWrap:"wrap",alignItems:"center",gap:1,flexGrow:1},children:[r(F,{loading:this.props.loading}),r(v,{sx:{display:"flex",alignItems:"center",gap:1,flexGrow:1,justifyContent:"end"},children:this.internalConfig.enablePaginationTop&&r(T,t({count:null!==(m=null===(w=this.props.data)||void 0===w?void 0:w.totalItems)&&void 0!==m?m:0,defaultFilter:null===(y=this.internalConfig.filterBar)||void 0===y?void 0:y.defaultValue,filter:this.filterState,onChange:this.onFilterStateChangeHandler},this.internalConfig.paginationBar))})]}),null===(B=this.props.slots)||void 0===B||null===(B=B.activeFiltersPanelSlots)||void 0===B?void 0:B.right]}),null===(H=this.props.slots)||void 0===H||null===(H=H.activeFiltersPanelSlots)||void 0===H?void 0:H.below,r(V,{data:null!==(P=null===(j=this.props.data)||void 0===j?void 0:j.items)&&void 0!==P?P:[],viewMode:this.viewMode,loading:this.props.loading,error:this.props.error,autoHeight:this.internalConfig.autoHeight,slots:this.internalConfig.viewMode}),this.renderFooter()]})})}}])}()}var x=u(v)({display:"flex",alignItems:"center",flexWrap:"wrap",gap:"8px",marginBottom:"8px",minHeight:"var(--filter-bar-height, 40px)"}),j=u(v)({display:"flex",justifyContent:"flex-end",width:"100%"});export{b as default};
 //# sourceMappingURL=create.data-view.js.map

package/dist/src/data-view/create.data-view.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.data-view.js","sources":["../../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData, IScrollTrackingOptions } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n  filterWrapProps?: BoxProps\r\n  filterSlots?: IPositionElement\r\n  activeFiltersPanelSlots?: IPositionElement\r\n  primaryInputSlots?: IFilterBarSlots\r\n  filterBarConfigs?: IFilterBarConfigs<T>\r\n  viewModeConfigs?: IViewModeConfigs<T>\r\n  paginationBarConfigs?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n  footerProps?: {\r\n    wrapProps?: BoxProps\r\n    enablePagination?: boolean\r\n  }\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n  loading?: boolean\r\n  error?: string\r\n  data?: IViewData<T>\r\n  filter?: IFilterState<T>\r\n  onFilterChange?: (value: IFilterState<T>) => void\r\n  viewMode?: EViewMode\r\n  onViewModeChange?: (value: EViewMode) => void\r\n  syncViewModeToURL?: boolean\r\n  slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n  filterBar?: IFilterBarConfigs<T>\r\n  viewMode?: IViewModeConfigs<T>\r\n  paginationBar?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n  enablePaginationTop?: boolean\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n  const FilterBarInstance = createFilterBar<T>()\r\n  const PopperPanelInstance = createPopperPanel<T>()\r\n  const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n  const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n  const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n  class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n    constructor(props: IDataViewProps<T>) {\r\n      super(props)\r\n      this.mergeConfig(props)\r\n      this.state = this.getDefaultState(props)\r\n    }\r\n\r\n    private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n      const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n      const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n      return {\r\n        ...defaultFilterBarState,\r\n        filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n        viewMode\r\n      }\r\n    }\r\n\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.filter ?? this.state.filterState\r\n    }\r\n\r\n    get viewMode(): EViewMode | undefined {\r\n      return this.props.viewMode ?? this.state.viewMode\r\n    }\r\n\r\n    private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n      const { slots } = currentProps\r\n      this.configCache = {\r\n        filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n        viewMode: slots?.viewModeConfigs,\r\n        paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n        enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false,\r\n        scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking)\r\n      }\r\n    }\r\n\r\n    private configCache: IInternalConfigs<T> = {}\r\n    get internalConfig() {\r\n      return this.configCache\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n      const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n      const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n      if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n      return true\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      const mapContext: IDataViewContext<T> = {\r\n        keyword: this.state.keyword.trim(),\r\n        filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n        filterState: this.filterState,\r\n        anchorEl: this.state.anchorEl,\r\n        area: this.state.area,\r\n        viewMode: this.state.viewMode,\r\n        scrolled: this.state.scrolled,\r\n        onFilterStateChange: this.onFilterStateChangeHandler,\r\n        onKeywordChange: this.onKeywordChangeHandler,\r\n        onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n        onPanelClose: this.onPanelCloseHandler,\r\n        onClear: this.onClearHandler\r\n      }\r\n\r\n      return (\r\n        <DataViewContext.Provider value={mapContext}>\r\n          {this.internalConfig.filterBar?.enableSticky && (\r\n            <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n          )}\r\n          {this.props.slots?.filterSlots?.above}\r\n          <FilterBarInstance\r\n            id={this.internalConfig.scrollTracking?.elementId}\r\n            slots={{\r\n              ...this.props.slots?.primaryInputSlots,\r\n              right: (\r\n                <>\r\n                  {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n                  {this.props.slots?.primaryInputSlots?.right}\r\n                </>\r\n              )\r\n            }}\r\n          >\r\n            <PopperPanelInstance />\r\n          </FilterBarInstance>\r\n          {this.props.slots?.filterSlots?.below}\r\n          {this.props.slots?.activeFiltersPanelSlots?.above}\r\n          <FilterBarPanel>\r\n            <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n            {this.props.slots?.activeFiltersPanelSlots?.left}\r\n            <Stack flexDirection={'row'} sx={{ flexWrap: 'wrap', alignItems: 'center', gap: 1, flexGrow: 1 }}>\r\n              <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n              <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1, justifyContent: 'end' }}>\r\n                {this.internalConfig.enablePaginationTop && (\r\n                  <PaginationBarInstance\r\n                    count={this.props.data?.totalItems ?? 0}\r\n                    defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n                    filter={this.filterState}\r\n                    onChange={this.onFilterStateChangeHandler}\r\n                    {...this.internalConfig.paginationBar}\r\n                  />\r\n                )}\r\n              </Box>\r\n            </Stack>\r\n            {this.props.slots?.activeFiltersPanelSlots?.right}\r\n          </FilterBarPanel>\r\n          {this.props.slots?.activeFiltersPanelSlots?.below}\r\n          <ViewModeInstance\r\n            data={this.props.data?.items ?? []}\r\n            viewMode={this.viewMode}\r\n            loading={this.props.loading}\r\n            error={this.props.error}\r\n            slots={this.internalConfig.viewMode}\r\n          />\r\n          {this.renderFooter()}\r\n        </DataViewContext.Provider>\r\n      )\r\n    }\r\n\r\n    renderFooter = () => {\r\n      const temp = this.props.slots?.footerProps || {}\r\n      return (\r\n        <FooterWrap {...temp.wrapProps}>\r\n          {temp.enablePagination !== false && (\r\n            <PaginationBarInstance\r\n              count={this.props.data?.totalItems ?? 0}\r\n              defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n              filter={this.filterState}\r\n              onChange={this.onFilterStateChangeHandler}\r\n              {...this.internalConfig.paginationBar}\r\n            />\r\n          )}\r\n        </FooterWrap>\r\n      )\r\n    }\r\n\r\n    onViewModeChangeHandler = (value: EViewMode) => {\r\n      this.setState({ viewMode: value }, () => {\r\n        if (this.props.syncViewModeToURL) {\r\n          const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n          syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n        }\r\n        this.props.onViewModeChange?.(value)\r\n      })\r\n    }\r\n\r\n    onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n    onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n    onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n    onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n    onPanelCloseHandler = () => {\r\n      this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n    }\r\n\r\n    onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n      if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n      this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n      if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n    }\r\n  }\r\n\r\n  return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  flexWrap: 'wrap',\r\n  gap: '8px',\r\n  marginBottom: '8px',\r\n  minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n  display: 'flex',\r\n  justifyContent: 'flex-end',\r\n  width: '100%'\r\n})\r\n"],"names":["createDataView","configs","FilterBarInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","scrollTracking","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$internalConfig$7","_this$props$slots4","_this$internalConfig$8","_this$props$slots5","_this$internalConfig$9","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_this$props$slots0","_this$props$slots1","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","_jsxs","DataViewContext","Provider","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","Stack","flexDirection","sx","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"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"}
+{"version":3,"file":"create.data-view.js","sources":["../../../src/data-view/create.data-view.tsx"],"sourcesContent":["import React, { Component, ComponentType } from 'react'\r\nimport { Box, BoxProps, Stack, styled } from '@mui/material'\r\nimport { SortButton } from './ui.units'\r\nimport { createViewMode } from './create.view-mode'\r\nimport { defaultViewMode, ViewModeButtons } from './view-mode.units'\r\nimport { getViewModeFromURL, syncViewModeToURL } from './query-param-url'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { IFilterBarConfigs, IFilterState, IFilterStateChangeHandler, IPositionElement, IViewData } from './types'\r\nimport { defaultFilterBarState, DataViewContext, IDataViewState, IDataViewContext, OnPanelValueChange } from './context'\r\nimport createFilterBar, { IFilterBarSlots } from './create.filter-bar'\r\nimport ScrollTracking, { IScrollTrackingData, IScrollTrackingOptions } from './scroll-tracking'\r\nimport createPaginationBar, { IPaginationBarConfigs } from './create.pagination-bar'\r\nimport createPopperPanel from './create.popper-panel'\r\nimport createActiveFiltersPanel from './create.active-filters-panel'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow'\r\n}\r\n\r\nexport interface IDataViewSlots<T extends IViewModeValidModel> {\r\n  filterWrapProps?: BoxProps\r\n  filterSlots?: IPositionElement\r\n  activeFiltersPanelSlots?: IPositionElement\r\n  primaryInputSlots?: IFilterBarSlots\r\n  filterBarConfigs?: IFilterBarConfigs<T>\r\n  viewModeConfigs?: IViewModeConfigs<T>\r\n  paginationBarConfigs?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n  footerProps?: {\r\n    wrapProps?: BoxProps\r\n    enablePagination?: boolean\r\n  }\r\n}\r\n\r\nexport interface IDataViewProps<T extends IViewModeValidModel> {\r\n  loading?: boolean\r\n  error?: string\r\n  data?: IViewData<T>\r\n  filter?: IFilterState<T>\r\n  onFilterChange?: (value: IFilterState<T>) => void\r\n  viewMode?: EViewMode\r\n  onViewModeChange?: (value: EViewMode) => void\r\n  syncViewModeToURL?: boolean\r\n  autoHeight?: boolean\r\n  slots?: IDataViewSlots<T>\r\n}\r\n\r\nexport interface IDataViewConfigs<T extends IViewModeValidModel> {\r\n  autoHeight?: boolean\r\n  filterBar?: IFilterBarConfigs<T>\r\n  viewMode?: IViewModeConfigs<T>\r\n  paginationBar?: IPaginationBarConfigs\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\ninterface IInternalConfigs<T extends IViewModeValidModel> extends IDataViewConfigs<T> {\r\n  enablePaginationTop?: boolean\r\n  scrollTracking?: IScrollTrackingOptions\r\n}\r\n\r\nfunction createDataView<T extends IViewModeValidModel>(configs: IDataViewConfigs<T>): ComponentType<IDataViewProps<T>> {\r\n  const FilterBarInstance = createFilterBar<T>()\r\n  const PopperPanelInstance = createPopperPanel<T>()\r\n  const ActiveFiltersPanelInstance = createActiveFiltersPanel<T>()\r\n  const ViewModeInstance = createViewMode<T>(configs.viewMode)\r\n  const PaginationBarInstance = createPaginationBar<T>()\r\n\r\n  class DataView extends Component<IDataViewProps<T>, IDataViewState<T>> {\r\n    constructor(props: IDataViewProps<T>) {\r\n      super(props)\r\n      this.mergeConfig(props)\r\n      this.state = this.getDefaultState(props)\r\n    }\r\n\r\n    private getDefaultState(currentProps: IDataViewProps<T>): IDataViewState<T> {\r\n      const defaultValue = currentProps.slots?.viewModeConfigs?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n      const viewMode = currentProps.syncViewModeToURL ? getViewModeFromURL<T>({ defaultViewMode: defaultValue }) : defaultValue\r\n      return {\r\n        ...defaultFilterBarState,\r\n        filterState: this.internalConfig.filterBar?.defaultValue ?? {},\r\n        viewMode\r\n      }\r\n    }\r\n\r\n    get filterState(): IFilterState<T> {\r\n      return this.props.filter ?? this.state.filterState\r\n    }\r\n\r\n    get viewMode(): EViewMode | undefined {\r\n      return this.props.viewMode ?? this.state.viewMode\r\n    }\r\n\r\n    private mergeConfig = (currentProps: IDataViewProps<T>) => {\r\n      const { slots } = currentProps\r\n      this.configCache = {\r\n        filterBar: Object.assign({}, configs.filterBar, slots?.filterBarConfigs),\r\n        viewMode: slots?.viewModeConfigs,\r\n        paginationBar: Object.assign({}, configs.paginationBar, slots?.paginationBarConfigs),\r\n        enablePaginationTop: slots?.paginationBarConfigs?.enablePaginationTop ?? configs.paginationBar?.enablePaginationTop ?? false,\r\n        scrollTracking: Object.assign({}, configs.scrollTracking, slots?.scrollTracking),\r\n        autoHeight: currentProps.autoHeight || configs.autoHeight || false\r\n      }\r\n    }\r\n\r\n    private configCache: IInternalConfigs<T> = {}\r\n    get internalConfig() {\r\n      return this.configCache\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IDataViewProps<T>>): boolean {\r\n      const filterDiff = JSON.stringify(nextProps.slots?.filterBarConfigs) !== JSON.stringify(this.props.slots?.filterBarConfigs)\r\n      const viewModeDiff = JSON.stringify(nextProps.slots?.viewModeConfigs) !== JSON.stringify(this.props.slots?.viewModeConfigs)\r\n      if (filterDiff || viewModeDiff) this.mergeConfig(nextProps)\r\n      return true\r\n    }\r\n\r\n    refFilterButton: HTMLButtonElement | null = null\r\n    refSortButton: HTMLButtonElement | null = null\r\n    render() {\r\n      const mapContext: IDataViewContext<T> = {\r\n        keyword: this.state.keyword.trim(),\r\n        filterBarConfigs: this.internalConfig.filterBar ?? {},\r\n        filterState: this.filterState,\r\n        anchorEl: this.state.anchorEl,\r\n        area: this.state.area,\r\n        viewMode: this.state.viewMode,\r\n        scrolled: this.state.scrolled,\r\n        onFilterStateChange: this.onFilterStateChangeHandler,\r\n        onKeywordChange: this.onKeywordChangeHandler,\r\n        onPopperPanelChange: this.onPopperPanelChangeHandler,\r\n        onPanelClose: this.onPanelCloseHandler,\r\n        onClear: this.onClearHandler\r\n      }\r\n\r\n      return (\r\n        <DataViewContext.Provider value={mapContext}>\r\n          <Stack sx={{ height: '100%', flex: 1 }}>\r\n            {this.internalConfig.filterBar?.enableSticky && (\r\n              <ScrollTracking onChange={this.onScrollChangeHandler} {...this.internalConfig.scrollTracking} />\r\n            )}\r\n            {this.props.slots?.filterSlots?.above}\r\n            <FilterBarInstance\r\n              id={this.internalConfig.scrollTracking?.elementId}\r\n              slots={{\r\n                ...this.props.slots?.primaryInputSlots,\r\n                right: (\r\n                  <>\r\n                    {this.internalConfig.filterBar?.enableSort && <SortButton />}\r\n                    {this.props.slots?.primaryInputSlots?.right}\r\n                  </>\r\n                )\r\n              }}\r\n            >\r\n              <PopperPanelInstance />\r\n            </FilterBarInstance>\r\n            {this.props.slots?.filterSlots?.below}\r\n            {this.props.slots?.activeFiltersPanelSlots?.above}\r\n            <FilterBarPanel>\r\n              <ViewModeButtons value={this.state.viewMode} onChange={this.onViewModeChangeHandler} />\r\n              {this.props.slots?.activeFiltersPanelSlots?.left}\r\n              <Stack flexDirection={'row'} sx={{ flexWrap: 'wrap', alignItems: 'center', gap: 1, flexGrow: 1 }}>\r\n                <ActiveFiltersPanelInstance loading={this.props.loading} />\r\n                <Box sx={{ display: 'flex', alignItems: 'center', gap: 1, flexGrow: 1, justifyContent: 'end' }}>\r\n                  {this.internalConfig.enablePaginationTop && (\r\n                    <PaginationBarInstance\r\n                      count={this.props.data?.totalItems ?? 0}\r\n                      defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n                      filter={this.filterState}\r\n                      onChange={this.onFilterStateChangeHandler}\r\n                      {...this.internalConfig.paginationBar}\r\n                    />\r\n                  )}\r\n                </Box>\r\n              </Stack>\r\n              {this.props.slots?.activeFiltersPanelSlots?.right}\r\n            </FilterBarPanel>\r\n            {this.props.slots?.activeFiltersPanelSlots?.below}\r\n            <ViewModeInstance\r\n              data={this.props.data?.items ?? []}\r\n              viewMode={this.viewMode}\r\n              loading={this.props.loading}\r\n              error={this.props.error}\r\n              autoHeight={this.internalConfig.autoHeight}\r\n              slots={this.internalConfig.viewMode}\r\n            />\r\n            {this.renderFooter()}\r\n          </Stack>\r\n        </DataViewContext.Provider>\r\n      )\r\n    }\r\n\r\n    renderFooter = () => {\r\n      const temp = this.props.slots?.footerProps || {}\r\n      return (\r\n        <FooterWrap {...temp.wrapProps}>\r\n          {temp.enablePagination !== false && (\r\n            <PaginationBarInstance\r\n              count={this.props.data?.totalItems ?? 0}\r\n              defaultFilter={this.internalConfig.filterBar?.defaultValue}\r\n              filter={this.filterState}\r\n              onChange={this.onFilterStateChangeHandler}\r\n              {...this.internalConfig.paginationBar}\r\n            />\r\n          )}\r\n        </FooterWrap>\r\n      )\r\n    }\r\n\r\n    onViewModeChangeHandler = (value: EViewMode) => {\r\n      this.setState({ viewMode: value }, () => {\r\n        if (this.props.syncViewModeToURL) {\r\n          const dViewMode = this.internalConfig.viewMode?.defaultValue ?? configs.viewMode?.defaultValue ?? defaultViewMode\r\n          syncViewModeToURL({ viewMode: value, defaultViewMode: dViewMode })\r\n        }\r\n        this.props.onViewModeChange?.(value)\r\n      })\r\n    }\r\n\r\n    onKeywordChangeHandler = (keyword: string) => this.setState({ keyword })\r\n\r\n    onScrollChangeHandler = (data: IScrollTrackingData) => this.setState({ scrolled: data.isScrolled })\r\n\r\n    onPopperPanelChangeHandler: OnPanelValueChange = (anchorEl, area) => this.setState({ anchorEl, area })\r\n\r\n    onClearHandler = () => this.setState(defaultFilterBarState)\r\n\r\n    onPanelCloseHandler = () => {\r\n      this.setState({ anchorEl: null, area: undefined, keyword: '' })\r\n    }\r\n\r\n    onFilterStateChangeHandler: IFilterStateChangeHandler<T> = (filterState: IFilterState<T>) => {\r\n      if (!this.props.filter) this.setState({ ...defaultFilterBarState, filterState })\r\n      this.props.onFilterChange && this.props.onFilterChange(filterState)\r\n      if (!!this.props.filter) this.setState(defaultFilterBarState)\r\n    }\r\n  }\r\n\r\n  return DataView\r\n}\r\n\r\nexport default createDataView\r\n\r\nconst FilterBarPanel = styled(Box)({\r\n  display: 'flex',\r\n  alignItems: 'center',\r\n  flexWrap: 'wrap',\r\n  gap: '8px',\r\n  marginBottom: '8px',\r\n  minHeight: 'var(--filter-bar-height, 40px)'\r\n})\r\n\r\nconst FooterWrap = styled(Box)({\r\n  display: 'flex',\r\n  justifyContent: 'flex-end',\r\n  width: '100%'\r\n})\r\n"],"names":["createDataView","configs","FilterBarInstance","createFilterBar","PopperPanelInstance","createPopperPanel","ActiveFiltersPanelInstance","createActiveFiltersPanel","ViewModeInstance","createViewMode","viewMode","PaginationBarInstance","createPaginationBar","DataView","props","_this","_classCallCheck","_callSuper","_defineProperty","currentProps","_ref","_slots$paginationBarC","_slots$paginationBarC2","_configs$paginationBa","slots","configCache","filterBar","Object","assign","filterBarConfigs","viewModeConfigs","paginationBar","paginationBarConfigs","enablePaginationTop","scrollTracking","autoHeight","_this$props$slots","_this$props$data$tota","_this$props$data","_this$internalConfig$","temp","footerProps","_jsx","FooterWrap","_objectSpread","wrapProps","children","enablePagination","count","data","totalItems","defaultFilter","internalConfig","defaultValue","filter","filterState","onChange","onFilterStateChangeHandler","value","setState","_this$props$onViewMod","_this$props","syncViewModeToURL","_ref2","_this$internalConfig$2","_this$internalConfig$3","_configs$viewMode","dViewMode","defaultViewMode","onViewModeChange","call","keyword","scrolled","isScrolled","anchorEl","area","defaultFilterBarState","undefined","onFilterChange","mergeConfig","state","getDefaultState","_inherits","Component","_createClass","key","_ref3","_currentProps$slots$v","_currentProps$slots","_configs$viewMode2","_this$internalConfig$4","_this$internalConfig$5","getViewModeFromURL","this","get","_this$props$filter","_this$props$viewMode","nextProps","_nextProps$slots","_this$props$slots2","_nextProps$slots2","_this$props$slots3","filterDiff","JSON","stringify","viewModeDiff","_this$internalConfig$6","_this$internalConfig$7","_this$props$slots4","_this$internalConfig$8","_this$props$slots5","_this$internalConfig$9","_this$props$slots6","_this$props$slots7","_this$props$slots8","_this$props$slots9","_this$props$data$tota2","_this$props$data2","_this$internalConfig$0","_this$props$slots0","_this$props$slots1","_this$props$data$item","_this$props$data3","mapContext","trim","onFilterStateChange","onKeywordChange","onKeywordChangeHandler","onPopperPanelChange","onPopperPanelChangeHandler","onPanelClose","onPanelCloseHandler","onClear","onClearHandler","DataViewContext","Provider","_jsxs","Stack","sx","height","flex","enableSticky","ScrollTracking","onScrollChangeHandler","filterSlots","above","id","elementId","primaryInputSlots","right","_Fragment","enableSort","SortButton","below","activeFiltersPanelSlots","FilterBarPanel","ViewModeButtons","onViewModeChangeHandler","left","flexDirection","flexWrap","alignItems","gap","flexGrow","loading","Box","display","justifyContent","items","error","renderFooter","styled","marginBottom","minHeight","width"],"mappings":"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"}

package/dist/src/data-view/create.filter-bar.js

@@ -1,2 +1,2 @@
-import{defineProperty as e,inherits as t,createClass as r,classCallCheck as a,callSuper as n,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as l}from"react/jsx-runtime";import{Component as p}from"react";import{styled as s,Box as c,colors as d}from"@mui/material";import u from"@mui/material/ClickAwayListener";import{createFilterStore as f}from"./filter-store.js";import{FilterButton as h,FilterInput as g,FilterInputAdornment as m}from"./ui.units.js";import{mapDataViewContext as b,defaultDataViewContext as v}from"./context.js";var x={root:"FilterBar-root",content:"FilterBar-content",input:"FilterBar-input",inputWrap:"FilterBar-inputWrap",label:"FilterBar-label",button:"FilterBar-button",spacing:"FilterBar-spacing",sticky:"FilterBar-sticky",shadow:"FilterBar-shadow"};function C(){var s=function(){function s(){var t;a(this,s);for(var r=arguments.length,o=new Array(r),i=0;i<r;i++)o[i]=arguments[i];return t=n(this,s,[].concat(o)),e(t,"dataViewContext",v),e(t,"refInput",null),e(t,"refBeforeInput",null),e(t,"getRootClasses",(function(){var e,r=null!==(e=t.dataViewContext.filterBarConfigs.enableSticky)&&void 0!==e&&e,a=[x.root];return r&&a.push(x.sticky),t.dataViewContext.scrolled&&a.push(x.shadow),a.join(" ")})),e(t,"handleKeyDown",(function(e){var r=e.keyCode;if(13===r)e.stopPropagation(),e.preventDefault(),t.handleEnterSearch();else if(27===r){var a;e.stopPropagation(),e.preventDefault(),null===(a=t.refInput)||void 0===a||a.blur(),t.dataViewContext.onPanelClose()}})),e(t,"handleEnterSearch",(function(){var e;if(t.dataViewContext.keyword){var r=f(t.dataViewContext.filterState);r.addQuickSearch(t.dataViewContext.keyword,{reason:"quickSearch",area:"input"});var a,n=r.build();if(null!==(e=n.details)&&void 0!==e&&e.isChanged)null===(a=t.refInput)||void 0===a||a.blur(),t.dataViewContext.onFilterStateChange(n)}})),e(t,"handleClear",(function(){var e;null===(e=t.refInput)||void 0===e||e.blur(),t.dataViewContext.onClear()})),t}return t(s,p),r(s,[{key:"render",value:function(){var e=this;return b((function(t){var r,a,n,p=t.filterBarConfigs,s=p.id;return e.dataViewContext=t,i(u,{onClickAway:function(){return t.onPopperPanelChange(null)},children:l(k,o(o({id:e.props.id,className:e.getRootClasses()},null===(r=e.props.slots)||void 0===r?void 0:r.wrapProps),{},{children:[l("div",{className:x.content,children:[null===(a=e.props.slots)||void 0===a?void 0:a.left,l("div",{className:x.inputWrap,children:[i(h,{className:x.button,onClick:function(e){t.onPopperPanelChange(e.currentTarget,"filterButton")}}),l(c,{component:"label",htmlFor:s,className:x.label,children:[i(c,{ref:function(t){e.refBeforeInput=t}}),i(g,{ref:function(t){e.refInput=t},id:s,className:x.input,placeholder:p.placeholder,onChange:function(e){return t.onKeywordChange(e.target.value)},value:t.keyword,onFocus:function(){e.refBeforeInput&&t.onPopperPanelChange(e.refBeforeInput,"input")},onKeyDown:e.handleKeyDown,endAdornment:i(m,{notes:p.notes,keyword:t.keyword,onEnterSearch:e.handleEnterSearch,onClear:e.handleClear})})]})]}),null===(n=e.props.slots)||void 0===n?void 0:n.right]}),e.props.children]}))})}))}}])}();return s}var k=s(c)((function(t){var r=t.theme;return e(e(e(e(e(e(e({marginBottom:"4px",marginLeft:"-6px",marginRight:"-6px"},"&.".concat(x.sticky),{position:"sticky",top:"var(--height-header, 0)",zIndex:r.zIndex.appBar-1}),".".concat(x.content),{display:"flex",gap:"8px",alignItems:"center",flexWrap:"wrap",padding:r.spacing(1.5,0,.75),position:"relative",backgroundColor:r.palette.background.paper,"&::after":{content:'""',position:"absolute",top:"100%",left:0,width:"100%",height:"6px",pointerEvents:"none",background:"linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)",maskImage:"linear-gradient(to right, transparent, black 20%, black 80%, transparent)",WebkitMaskImage:"linear-gradient(to right, transparent, black 20%, black 80%, transparent)",opacity:0}}),"&.".concat(x.shadow," .").concat(x.content),{"&::after":{transition:"opacity 0.2s ease-in-out",transitionDelay:"0.2s",opacity:1}}),".".concat(x.input),{input:{padding:"4px 0 5px"}}),".".concat(x.inputWrap),{flex:1,display:"flex",alignItems:"center",minHeight:"var(--filter-bar-height, 40px)",gap:"8px",borderRadius:"6px",transition:"all linear 0.2s",padding:"0 8px",backgroundColor:r.palette.background.paper,border:"1px solid var(--color-divider, rgba(145 158 171 / 20%))","&:hover":{backgroundColor:"dark"===r.palette.mode?r.palette.grey[900]:d.grey[50],borderColor:"dark"===r.palette.mode?d.blue[300]:d.blue[200]},"&:focus-within":{backgroundColor:"dark"===r.palette.mode?r.palette.grey[900]:d.grey[50],borderColor:"dark"===r.palette.mode?d.blue[300]:d.blue[400],boxShadow:"dark"===r.palette.mode?"0 0 0 2px ".concat(d.blue[200]):"0 0 0 2px ".concat(d.blue[100])}}),".".concat(x.label),{flex:1,display:"flex",alignItems:"flex-end"}),".".concat(x.spacing),{flex:1,height:"var(--filter-bar-height, 40px)"})}));export{C as createFilterBar,C as default,x as filterBarClasses};
+import{defineProperty as e,inherits as t,createClass as a,classCallCheck as r,callSuper as n,objectSpread2 as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as i,jsxs as l}from"react/jsx-runtime";import{Component as p}from"react";import{styled as s,Box as c,colors as d}from"@mui/material";import u from"@mui/material/ClickAwayListener";import{createFilterStore as f}from"./filter-store.js";import{FilterButton as g,FilterInput as h,FilterInputAdornment as m}from"./ui.units.js";import{mapDataViewContext as b,defaultDataViewContext as v}from"./context.js";var C={root:"FilterBar-root",content:"FilterBar-content",input:"FilterBar-input",inputWrap:"FilterBar-inputWrap",label:"FilterBar-label",button:"FilterBar-button",spacing:"FilterBar-spacing",sticky:"FilterBar-sticky",shadow:"FilterBar-shadow"};function k(){var s=function(){function s(){var t;r(this,s);for(var a=arguments.length,o=new Array(a),i=0;i<a;i++)o[i]=arguments[i];return t=n(this,s,[].concat(o)),e(t,"dataViewContext",v),e(t,"refInput",null),e(t,"refBeforeInput",null),e(t,"getRootClasses",(function(){var e,a=null!==(e=t.dataViewContext.filterBarConfigs.enableSticky)&&void 0!==e&&e,r=[C.root];return a&&r.push(C.sticky),t.dataViewContext.scrolled&&r.push(C.shadow),r.join(" ")})),e(t,"handleKeyDown",(function(e){var a=e.keyCode;if(13===a)e.stopPropagation(),e.preventDefault(),t.handleEnterSearch();else if(27===a){var r;e.stopPropagation(),e.preventDefault(),null===(r=t.refInput)||void 0===r||r.blur(),t.dataViewContext.onPanelClose()}})),e(t,"handleEnterSearch",(function(){var e;if(t.dataViewContext.keyword){var a=f(t.dataViewContext.filterState);a.addQuickSearch(t.dataViewContext.keyword,{reason:"quickSearch",area:"input"});var r,n=a.build();if(null!==(e=n.details)&&void 0!==e&&e.isChanged)null===(r=t.refInput)||void 0===r||r.blur(),t.dataViewContext.onFilterStateChange(n)}})),e(t,"handleClear",(function(){var e;null===(e=t.refInput)||void 0===e||e.blur(),t.dataViewContext.onClear()})),t}return t(s,p),a(s,[{key:"render",value:function(){var e=this;return b((function(t){var a,r,n,p=t.filterBarConfigs,s=p.id;return e.dataViewContext=t,i(u,{onClickAway:function(){return t.onPopperPanelChange(null)},children:l(x,o(o({id:e.props.id,className:e.getRootClasses()},null===(a=e.props.slots)||void 0===a?void 0:a.wrapProps),{},{children:[l("div",{className:C.content,children:[null===(r=e.props.slots)||void 0===r?void 0:r.left,l("div",{className:C.inputWrap,children:[i(g,{className:C.button,onClick:function(e){t.onPopperPanelChange(e.currentTarget,"filterButton")}}),l(c,{component:"label",htmlFor:s,className:C.label,children:[i(c,{ref:function(t){e.refBeforeInput=t}}),i(h,{ref:function(t){e.refInput=t},id:s,className:C.input,placeholder:p.placeholder,onChange:function(e){return t.onKeywordChange(e.target.value)},value:t.keyword,onFocus:function(){e.refBeforeInput&&t.onPopperPanelChange(e.refBeforeInput,"input")},onKeyDown:e.handleKeyDown,endAdornment:i(m,{notes:p.notes,keyword:t.keyword,onEnterSearch:e.handleEnterSearch,onClear:e.handleClear})})]})]}),null===(n=e.props.slots)||void 0===n?void 0:n.right]}),e.props.children]}))})}))}}])}();return s}var x=s(c)((function(t){var a=t.theme;return e(e(e(e(e(e(e({marginBottom:"4px",marginLeft:a.spacing(-1),marginRight:a.spacing(-1),paddingLeft:a.spacing(.5),paddingRight:a.spacing(.5)},"&.".concat(C.sticky),{position:"sticky",top:"var(--height-header, 0)",zIndex:a.zIndex.appBar-1}),".".concat(C.content),{display:"flex",gap:"8px",alignItems:"center",flexWrap:"wrap",padding:a.spacing(1.5,0,.75),position:"relative",backgroundColor:a.palette.background.paper,"&::after":{content:'""',position:"absolute",top:"100%",left:0,width:"100%",height:"6px",pointerEvents:"none",background:"linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)",maskImage:"linear-gradient(to right, transparent, black 20%, black 80%, transparent)",WebkitMaskImage:"linear-gradient(to right, transparent, black 20%, black 80%, transparent)",opacity:0}}),"&.".concat(C.shadow," .").concat(C.content),{"&::after":{transition:"opacity 0.2s ease-in-out",transitionDelay:"0.2s",opacity:1}}),".".concat(C.input),{input:{padding:"4px 0 5px"}}),".".concat(C.inputWrap),{flex:1,display:"flex",alignItems:"center",minHeight:"var(--filter-bar-height, 40px)",gap:"8px",borderRadius:"6px",transition:"all linear 0.2s",padding:"0 8px",backgroundColor:a.palette.background.paper,border:"1px solid var(--color-divider, rgba(145 158 171 / 20%))","&:hover":{backgroundColor:"dark"===a.palette.mode?a.palette.grey[900]:d.grey[50],borderColor:"dark"===a.palette.mode?d.blue[300]:d.blue[200]},"&:focus-within":{backgroundColor:"dark"===a.palette.mode?a.palette.grey[900]:d.grey[50],borderColor:"dark"===a.palette.mode?d.blue[300]:d.blue[400],boxShadow:"dark"===a.palette.mode?"0 0 0 2px ".concat(d.blue[200]):"0 0 0 2px ".concat(d.blue[100])}}),".".concat(C.label),{flex:1,display:"flex",alignItems:"flex-end"}),".".concat(C.spacing),{flex:1,height:"var(--filter-bar-height, 40px)"})}));export{k as createFilterBar,k as default,C as filterBarClasses};
 //# sourceMappingURL=create.filter-bar.js.map

package/dist/src/data-view/create.filter-bar.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.filter-bar.js","sources":["../../../src/data-view/create.filter-bar.tsx"],"sourcesContent":["import React, { Component, PropsWithChildren } from 'react'\r\nimport { Box, BoxProps, colors, styled } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { IPositionElement } from './types'\r\nimport { createFilterStore } from './filter-store'\r\nimport { FilterButton, FilterInput, FilterInputAdornment } from './ui.units'\r\nimport { defaultDataViewContext, IDataViewContext, mapDataViewContext } from './context'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow',\r\n  helpText: 'FilterBar-helpText'\r\n}\r\n\r\nexport interface IFilterBarSlots extends IPositionElement<'left' | 'right'> {\r\n  wrapProps?: BoxProps\r\n}\r\n\r\nexport interface IFilterBarProps extends PropsWithChildren {\r\n  id?: string\r\n  slots?: IFilterBarSlots\r\n}\r\n\r\nexport function createFilterBar<T>() {\r\n  class FilterBar extends Component<IFilterBarProps> {\r\n    dataViewContext: IDataViewContext<T> = defaultDataViewContext\r\n\r\n    refInput: HTMLInputElement | null = null\r\n    refBeforeInput: HTMLElement | null = null\r\n    render() {\r\n      return mapDataViewContext((context) => {\r\n        const configs = context.filterBarConfigs\r\n        const id = configs.id\r\n        this.dataViewContext = context\r\n        return (\r\n          <ClickAwayListener onClickAway={() => context.onPopperPanelChange(null)}>\r\n            <FilterBarStyled id={this.props.id} className={this.getRootClasses()} {...this.props.slots?.wrapProps}>\r\n              <div className={filterBarClasses.content}>\r\n                {this.props.slots?.left}\r\n                <div className={filterBarClasses.inputWrap}>\r\n                  <FilterButton\r\n                    className={filterBarClasses.button}\r\n                    onClick={(e) => {\r\n                      context.onPopperPanelChange(e.currentTarget, 'filterButton')\r\n                    }}\r\n                  />\r\n                  <Box component='label' htmlFor={id} className={filterBarClasses.label}>\r\n                    <Box\r\n                      ref={(ref: HTMLElement) => {\r\n                        this.refBeforeInput = ref\r\n                      }}\r\n                    />\r\n                    <FilterInput\r\n                      ref={(ref: HTMLInputElement) => {\r\n                        this.refInput = ref\r\n                      }}\r\n                      id={id}\r\n                      className={filterBarClasses.input}\r\n                      placeholder={configs.placeholder}\r\n                      onChange={(e) => context.onKeywordChange(e.target.value)}\r\n                      value={context.keyword}\r\n                      onFocus={() => {\r\n                        if (!this.refBeforeInput) return\r\n                        context.onPopperPanelChange(this.refBeforeInput, 'input')\r\n                      }}\r\n                      onKeyDown={this.handleKeyDown}\r\n                      endAdornment={\r\n                        <FilterInputAdornment\r\n                          notes={configs.notes}\r\n                          keyword={context.keyword}\r\n                          onEnterSearch={this.handleEnterSearch}\r\n                          onClear={this.handleClear}\r\n                        />\r\n                      }\r\n                    />\r\n                  </Box>\r\n                </div>\r\n                {this.props.slots?.right}\r\n              </div>\r\n              {this.props.children}\r\n            </FilterBarStyled>\r\n          </ClickAwayListener>\r\n        )\r\n      })\r\n    }\r\n\r\n    getRootClasses = () => {\r\n      const enableSticky = this.dataViewContext.filterBarConfigs.enableSticky ?? false\r\n      const classes: string[] = [filterBarClasses.root]\r\n      if (enableSticky) classes.push(filterBarClasses.sticky)\r\n      if (this.dataViewContext.scrolled) classes.push(filterBarClasses.shadow)\r\n      return classes.join(' ')\r\n    }\r\n\r\n    handleKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {\r\n      const keyCode: number = event.keyCode\r\n      if (keyCode === 13) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        this.handleEnterSearch()\r\n      } else if (keyCode === 27) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        this.refInput?.blur()\r\n        this.dataViewContext.onPanelClose()\r\n      }\r\n    }\r\n\r\n    handleEnterSearch = () => {\r\n      if (!this.dataViewContext.keyword) return\r\n      const store = createFilterStore<T>(this.dataViewContext.filterState)\r\n      store.addQuickSearch(this.dataViewContext.keyword, { reason: 'quickSearch', area: 'input' })\r\n      const temp = store.build()\r\n      if (!!temp.details?.isChanged) {\r\n        this.refInput?.blur()\r\n        this.dataViewContext.onFilterStateChange(temp)\r\n      }\r\n    }\r\n\r\n    handleClear = () => {\r\n      this.refInput?.blur()\r\n      this.dataViewContext.onClear()\r\n    }\r\n  }\r\n  return FilterBar\r\n}\r\nexport default createFilterBar\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n  marginBottom: '4px',\r\n  marginLeft: '-6px',\r\n  marginRight: '-6px',\r\n  [`&.${filterBarClasses.sticky}`]: {\r\n    position: 'sticky',\r\n    top: 'var(--height-header, 0)',\r\n    zIndex: theme.zIndex.appBar - 1\r\n  },\r\n  [`.${filterBarClasses.content}`]: {\r\n    display: 'flex',\r\n    gap: '8px',\r\n    alignItems: 'center',\r\n    flexWrap: 'wrap',\r\n    padding: theme.spacing(1.5, 0, 0.75),\r\n    position: 'relative',\r\n    backgroundColor: theme.palette.background.paper,\r\n    '&::after': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      top: '100%',\r\n      left: 0,\r\n      width: '100%',\r\n      height: '6px',\r\n      pointerEvents: 'none',\r\n      background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)',\r\n      maskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n      WebkitMaskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n      opacity: 0\r\n    }\r\n  },\r\n  [`&.${filterBarClasses.shadow} .${filterBarClasses.content}`]: {\r\n    '&::after': { transition: 'opacity 0.2s ease-in-out', transitionDelay: '0.2s', opacity: 1 }\r\n  },\r\n  [`.${filterBarClasses.input}`]: { input: { padding: '4px 0 5px' } },\r\n  [`.${filterBarClasses.inputWrap}`]: {\r\n    flex: 1,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    minHeight: 'var(--filter-bar-height, 40px)',\r\n    gap: '8px',\r\n    borderRadius: '6px',\r\n    transition: 'all linear 0.2s',\r\n    padding: '0 8px',\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '1px solid var(--color-divider, rgba(145 158 171 / 20%))',\r\n    '&:hover': {\r\n      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n      borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[200]\r\n    },\r\n    '&:focus-within': {\r\n      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n      borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[400],\r\n      boxShadow: theme.palette.mode === 'dark' ? `0 0 0 2px ${colors.blue[200]}` : `0 0 0 2px ${colors.blue[100]}`\r\n    }\r\n  },\r\n  [`.${filterBarClasses.label}`]: { flex: 1, display: 'flex', alignItems: 'flex-end' },\r\n  [`.${filterBarClasses.spacing}`]: { flex: 1, height: 'var(--filter-bar-height, 40px)' }\r\n}))\r\n"],"names":["filterBarClasses","root","content","input","inputWrap","label","button","spacing","sticky","shadow","createFilterBar","FilterBar","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","defaultDataViewContext","_this$dataViewContext","enableSticky","dataViewContext","filterBarConfigs","classes","push","scrolled","join","event","keyCode","stopPropagation","preventDefault","handleEnterSearch","_this$refInput","refInput","blur","onPanelClose","_temp$details","keyword","store","createFilterStore","filterState","addQuickSearch","reason","area","_this$refInput2","temp","build","details","isChanged","onFilterStateChange","_this$refInput3","onClear","_inherits","Component","_createClass","key","value","_this2","mapDataViewContext","context","_this2$props$slots","_this2$props$slots2","_this2$props$slots3","configs","id","_jsx","ClickAwayListener","onClickAway","onPopperPanelChange","_jsxs","FilterBarStyled","_objectSpread","props","className","getRootClasses","slots","wrapProps","children","left","FilterButton","onClick","e","currentTarget","Box","component","htmlFor","ref","refBeforeInput","FilterInput","placeholder","onChange","onKeywordChange","target","onFocus","onKeyDown","handleKeyDown","endAdornment","FilterInputAdornment","notes","onEnterSearch","handleClear","right","styled","_ref3","theme","marginBottom","marginLeft","marginRight","position","top","zIndex","appBar","display","gap","alignItems","flexWrap","padding","backgroundColor","palette","background","paper","width","height","pointerEvents","maskImage","WebkitMaskImage","opacity","transition","transitionDelay","flex","minHeight","borderRadius","border","mode","grey","colors","borderColor","blue","boxShadow"],"mappings":"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"}
+{"version":3,"file":"create.filter-bar.js","sources":["../../../src/data-view/create.filter-bar.tsx"],"sourcesContent":["import React, { Component, PropsWithChildren } from 'react'\r\nimport { Box, BoxProps, colors, styled } from '@mui/material'\r\nimport ClickAwayListener from '@mui/material/ClickAwayListener'\r\nimport { IPositionElement } from './types'\r\nimport { createFilterStore } from './filter-store'\r\nimport { FilterButton, FilterInput, FilterInputAdornment } from './ui.units'\r\nimport { defaultDataViewContext, IDataViewContext, mapDataViewContext } from './context'\r\n\r\nexport const filterBarClasses = {\r\n  root: 'FilterBar-root',\r\n  content: 'FilterBar-content',\r\n  input: 'FilterBar-input',\r\n  inputWrap: 'FilterBar-inputWrap',\r\n  label: 'FilterBar-label',\r\n  button: 'FilterBar-button',\r\n  spacing: 'FilterBar-spacing',\r\n  panel: 'FilterBar-panel',\r\n  sticky: 'FilterBar-sticky',\r\n  shadow: 'FilterBar-shadow',\r\n  helpText: 'FilterBar-helpText'\r\n}\r\n\r\nexport interface IFilterBarSlots extends IPositionElement<'left' | 'right'> {\r\n  wrapProps?: BoxProps\r\n}\r\n\r\nexport interface IFilterBarProps extends PropsWithChildren {\r\n  id?: string\r\n  slots?: IFilterBarSlots\r\n}\r\n\r\nexport function createFilterBar<T>() {\r\n  class FilterBar extends Component<IFilterBarProps> {\r\n    dataViewContext: IDataViewContext<T> = defaultDataViewContext\r\n\r\n    refInput: HTMLInputElement | null = null\r\n    refBeforeInput: HTMLElement | null = null\r\n    render() {\r\n      return mapDataViewContext((context) => {\r\n        const configs = context.filterBarConfigs\r\n        const id = configs.id\r\n        this.dataViewContext = context\r\n        return (\r\n          <ClickAwayListener onClickAway={() => context.onPopperPanelChange(null)}>\r\n            <FilterBarStyled id={this.props.id} className={this.getRootClasses()} {...this.props.slots?.wrapProps}>\r\n              <div className={filterBarClasses.content}>\r\n                {this.props.slots?.left}\r\n                <div className={filterBarClasses.inputWrap}>\r\n                  <FilterButton\r\n                    className={filterBarClasses.button}\r\n                    onClick={(e) => {\r\n                      context.onPopperPanelChange(e.currentTarget, 'filterButton')\r\n                    }}\r\n                  />\r\n                  <Box component='label' htmlFor={id} className={filterBarClasses.label}>\r\n                    <Box\r\n                      ref={(ref: HTMLElement) => {\r\n                        this.refBeforeInput = ref\r\n                      }}\r\n                    />\r\n                    <FilterInput\r\n                      ref={(ref: HTMLInputElement) => {\r\n                        this.refInput = ref\r\n                      }}\r\n                      id={id}\r\n                      className={filterBarClasses.input}\r\n                      placeholder={configs.placeholder}\r\n                      onChange={(e) => context.onKeywordChange(e.target.value)}\r\n                      value={context.keyword}\r\n                      onFocus={() => {\r\n                        if (!this.refBeforeInput) return\r\n                        context.onPopperPanelChange(this.refBeforeInput, 'input')\r\n                      }}\r\n                      onKeyDown={this.handleKeyDown}\r\n                      endAdornment={\r\n                        <FilterInputAdornment\r\n                          notes={configs.notes}\r\n                          keyword={context.keyword}\r\n                          onEnterSearch={this.handleEnterSearch}\r\n                          onClear={this.handleClear}\r\n                        />\r\n                      }\r\n                    />\r\n                  </Box>\r\n                </div>\r\n                {this.props.slots?.right}\r\n              </div>\r\n              {this.props.children}\r\n            </FilterBarStyled>\r\n          </ClickAwayListener>\r\n        )\r\n      })\r\n    }\r\n\r\n    getRootClasses = () => {\r\n      const enableSticky = this.dataViewContext.filterBarConfigs.enableSticky ?? false\r\n      const classes: string[] = [filterBarClasses.root]\r\n      if (enableSticky) classes.push(filterBarClasses.sticky)\r\n      if (this.dataViewContext.scrolled) classes.push(filterBarClasses.shadow)\r\n      return classes.join(' ')\r\n    }\r\n\r\n    handleKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement> = (event) => {\r\n      const keyCode: number = event.keyCode\r\n      if (keyCode === 13) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        this.handleEnterSearch()\r\n      } else if (keyCode === 27) {\r\n        event.stopPropagation()\r\n        event.preventDefault()\r\n        this.refInput?.blur()\r\n        this.dataViewContext.onPanelClose()\r\n      }\r\n    }\r\n\r\n    handleEnterSearch = () => {\r\n      if (!this.dataViewContext.keyword) return\r\n      const store = createFilterStore<T>(this.dataViewContext.filterState)\r\n      store.addQuickSearch(this.dataViewContext.keyword, { reason: 'quickSearch', area: 'input' })\r\n      const temp = store.build()\r\n      if (!!temp.details?.isChanged) {\r\n        this.refInput?.blur()\r\n        this.dataViewContext.onFilterStateChange(temp)\r\n      }\r\n    }\r\n\r\n    handleClear = () => {\r\n      this.refInput?.blur()\r\n      this.dataViewContext.onClear()\r\n    }\r\n  }\r\n  return FilterBar\r\n}\r\nexport default createFilterBar\r\n\r\nconst FilterBarStyled = styled(Box)(({ theme }) => ({\r\n  marginBottom: '4px',\r\n  marginLeft: theme.spacing(-1),\r\n  marginRight: theme.spacing(-1),\r\n  paddingLeft: theme.spacing(0.5),\r\n  paddingRight: theme.spacing(0.5),\r\n  [`&.${filterBarClasses.sticky}`]: {\r\n    position: 'sticky',\r\n    top: 'var(--height-header, 0)',\r\n    zIndex: theme.zIndex.appBar - 1\r\n  },\r\n  [`.${filterBarClasses.content}`]: {\r\n    display: 'flex',\r\n    gap: '8px',\r\n    alignItems: 'center',\r\n    flexWrap: 'wrap',\r\n    padding: theme.spacing(1.5, 0, 0.75),\r\n    position: 'relative',\r\n    backgroundColor: theme.palette.background.paper,\r\n    '&::after': {\r\n      content: '\"\"',\r\n      position: 'absolute',\r\n      top: '100%',\r\n      left: 0,\r\n      width: '100%',\r\n      height: '6px',\r\n      pointerEvents: 'none',\r\n      background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent)',\r\n      maskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n      WebkitMaskImage: 'linear-gradient(to right, transparent, black 20%, black 80%, transparent)',\r\n      opacity: 0\r\n    }\r\n  },\r\n  [`&.${filterBarClasses.shadow} .${filterBarClasses.content}`]: {\r\n    '&::after': { transition: 'opacity 0.2s ease-in-out', transitionDelay: '0.2s', opacity: 1 }\r\n  },\r\n  [`.${filterBarClasses.input}`]: { input: { padding: '4px 0 5px' } },\r\n  [`.${filterBarClasses.inputWrap}`]: {\r\n    flex: 1,\r\n    display: 'flex',\r\n    alignItems: 'center',\r\n    minHeight: 'var(--filter-bar-height, 40px)',\r\n    gap: '8px',\r\n    borderRadius: '6px',\r\n    transition: 'all linear 0.2s',\r\n    padding: '0 8px',\r\n    backgroundColor: theme.palette.background.paper,\r\n    border: '1px solid var(--color-divider, rgba(145 158 171 / 20%))',\r\n    '&:hover': {\r\n      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n      borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[200]\r\n    },\r\n    '&:focus-within': {\r\n      backgroundColor: theme.palette.mode === 'dark' ? theme.palette.grey[900] : colors.grey[50],\r\n      borderColor: theme.palette.mode === 'dark' ? colors.blue[300] : colors.blue[400],\r\n      boxShadow: theme.palette.mode === 'dark' ? `0 0 0 2px ${colors.blue[200]}` : `0 0 0 2px ${colors.blue[100]}`\r\n    }\r\n  },\r\n  [`.${filterBarClasses.label}`]: { flex: 1, display: 'flex', alignItems: 'flex-end' },\r\n  [`.${filterBarClasses.spacing}`]: { flex: 1, height: 'var(--filter-bar-height, 40px)' }\r\n}))\r\n"],"names":["filterBarClasses","root","content","input","inputWrap","label","button","spacing","sticky","shadow","createFilterBar","FilterBar","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","defaultDataViewContext","_this$dataViewContext","enableSticky","dataViewContext","filterBarConfigs","classes","push","scrolled","join","event","keyCode","stopPropagation","preventDefault","handleEnterSearch","_this$refInput","refInput","blur","onPanelClose","_temp$details","keyword","store","createFilterStore","filterState","addQuickSearch","reason","area","_this$refInput2","temp","build","details","isChanged","onFilterStateChange","_this$refInput3","onClear","_inherits","Component","_createClass","key","value","_this2","mapDataViewContext","context","_this2$props$slots","_this2$props$slots2","_this2$props$slots3","configs","id","_jsx","ClickAwayListener","onClickAway","onPopperPanelChange","_jsxs","FilterBarStyled","_objectSpread","props","className","getRootClasses","slots","wrapProps","children","left","FilterButton","onClick","e","currentTarget","Box","component","htmlFor","ref","refBeforeInput","FilterInput","placeholder","onChange","onKeywordChange","target","onFocus","onKeyDown","handleKeyDown","endAdornment","FilterInputAdornment","notes","onEnterSearch","handleClear","right","styled","_ref3","theme","marginBottom","marginLeft","marginRight","paddingLeft","paddingRight","position","top","zIndex","appBar","display","gap","alignItems","flexWrap","padding","backgroundColor","palette","background","paper","width","height","pointerEvents","maskImage","WebkitMaskImage","opacity","transition","transitionDelay","flex","minHeight","borderRadius","border","mode","grey","colors","borderColor","blue","boxShadow"],"mappings":"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"}

package/dist/src/data-view/create.view-mode.js

@@ -1,2 +1,2 @@
-import{slicedToArray as o,objectSpread2 as i}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as n,Fragment as e}from"react/jsx-runtime";import l,{useState as r,useCallback as a,useMemo as d,useEffect as s}from"react";import{styled as u,Typography as v}from"@mui/material";import{motion as c,AnimatePresence as m}from"framer-motion";import{createViewModeModule as f,createViewModeList as p}from"./view-mode.content.js";import{EViewMode as g}from"./view-mode.types.js";import{LoadingError as y,LoadingWaiting as h,LoadingNoData as w,LoadingOverlay as b}from"./view-mode.units.js";var k={hidden:{opacity:0,y:8,scale:.98},visible:{opacity:1,y:0,scale:1},exit:{opacity:0,y:-8,scale:.98}},j={duration:.25,ease:[.25,.1,.25,1]};function x(u){var x=f(),M=p(),S=function(l){var f=r(l.viewMode||g.Module),p=o(f,2),S=p[0],C=p[1],E=a((function(){var o,i,t,n,e,r,a,d,s,v,c,m,f,p=Object.assign({},null==u||null===(o=u.list)||void 0===o?void 0:o.columns,null===(i=l.slots)||void 0===i||null===(i=i.list)||void 0===i?void 0:i.columns),g=Object.assign({},null==u?void 0:u.list,null===(t=l.slots)||void 0===t?void 0:t.list,{columns:p});return{NoData:null!==(n=null!==(e=null===(r=l.slots)||void 0===r?void 0:r.NoData)&&void 0!==e?e:null==u?void 0:u.NoData)&&void 0!==n?n:w,Skeleton:null!==(a=null!==(d=null===(s=l.slots)||void 0===s?void 0:s.Skeleton)&&void 0!==d?d:null==u?void 0:u.Skeleton)&&void 0!==a?a:h,ErrorData:null!==(v=null!==(c=null===(m=l.slots)||void 0===m?void 0:m.ErrorData)&&void 0!==c?c:null==u?void 0:u.ErrorData)&&void 0!==v?v:y,listConfigs:g,moduleConfigs:Object.assign({},null==u?void 0:u.module,null===(f=l.slots)||void 0===f?void 0:f.module)}}),[l.slots]),N=a((function(){var o;return Object.assign({},null==u?void 0:u.wrapProps,null===(o=l.slots)||void 0===o?void 0:o.wrapProps)}),[l.slots]),O=a((function(o){var i=E();switch(o){case g.List:return n(M,{value:l.data,configs:i.listConfigs});case g.Module:return n(x,{data:l.data,configs:i.moduleConfigs});default:return t(v,{variant:"subtitle1",children:["Unsupported view mode: ",o]})}}),[l.data,E]),P=a((function(o){var i=E(),r=i.NoData,a=i.ErrorData,d=i.Skeleton;return l.error?{key:"error",content:n(a,{error:l.error})}:l.loading&&0===l.data.length&&d?{key:"skeleton",content:n(d,{mode:o})}:0!==l.data.length||l.loading?l.data.length>0?{key:"content-".concat(o,"-").concat(l.data.length),content:t(e,{children:[l.loading&&n(b,{}),n(m,{mode:"wait",children:n(c.div,{variants:k,initial:"hidden",animate:"visible",exit:"exit",transition:j,children:O(o)},o)})]})}:{key:"loading",content:n(b,{})}:{key:"no-data",content:n(r,{mode:o})}}),[l.error,l.loading,l.data,E,O]),_=a((function(o){var i=P(o),t=i.key,e=i.content;return n(m,{mode:"wait",children:n(c.div,{variants:k,initial:"hidden",animate:"visible",exit:"exit",transition:j,layout:!0,children:e},t)})}),[P]),z=d((function(){return N()}),[N]);return s((function(){l.viewMode&&C(l.viewMode)}),[l.viewMode]),n(D,i(i({layout:"size",transition:{layout:{duration:.3,ease:[.4,0,.2,1]},opacity:{duration:.2}}},z),{},{children:_(S)}))};return l.memo(S)}var D=u(c.div,{shouldForwardProp:function(o){return"color"!==o&&"bgcolor"!==o&&"sx"!==o}})({position:"relative",display:"flex",flexDirection:"column"});export{x as createViewMode};
+import{inherits as t,createClass as o,objectSpread2 as e,classCallCheck as i,callSuper as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as r,jsx as s,Fragment as l}from"react/jsx-runtime";import{styled as a,Typography as d}from"@mui/material";import{memo as p,PureComponent as u}from"react";import{createViewModeModule as h,createViewModeList as v}from"./view-mode.content.js";import{EViewMode as c}from"./view-mode.types.js";import{LoadingError as g,LoadingWaiting as m,LoadingNoData as f,LoadingOverlay as k}from"./view-mode.units.js";import y from"./animation-switch.js";function w(a){var w=h(),M=v();return p(function(){function p(t){var o;return i(this,p),(o=n(this,p,[t])).state={currentMode:t.viewMode||c.Module},o}return t(p,u),o(p,[{key:"componentDidUpdate",value:function(t){t.viewMode!==this.props.viewMode&&this.props.viewMode&&this.setState({currentMode:this.props.viewMode})}},{key:"getInternalConfigs",value:function(){var t,o,e,i,n,r,s,l,d,p,u,h,v,c=Object.assign({},null==a||null===(t=a.list)||void 0===t?void 0:t.columns,null===(o=this.props.slots)||void 0===o||null===(o=o.list)||void 0===o?void 0:o.columns),k=Object.assign({},null==a?void 0:a.list,null===(e=this.props.slots)||void 0===e?void 0:e.list,{columns:c});return{NoData:null!==(i=null!==(n=null===(r=this.props.slots)||void 0===r?void 0:r.NoData)&&void 0!==n?n:null==a?void 0:a.NoData)&&void 0!==i?i:f,Skeleton:null!==(s=null!==(l=null===(d=this.props.slots)||void 0===d?void 0:d.Skeleton)&&void 0!==l?l:null==a?void 0:a.Skeleton)&&void 0!==s?s:m,ErrorData:null!==(p=null!==(u=null===(h=this.props.slots)||void 0===h?void 0:h.ErrorData)&&void 0!==u?u:null==a?void 0:a.ErrorData)&&void 0!==p?p:g,listConfigs:k,moduleConfigs:Object.assign({},null==a?void 0:a.module,null===(v=this.props.slots)||void 0===v?void 0:v.module)}}},{key:"getWrapperProps",value:function(){var t;return Object.assign({},null==a?void 0:a.wrapProps,null===(t=this.props.slots)||void 0===t?void 0:t.wrapProps)}},{key:"renderContentByMode",value:function(t){var o=this.getInternalConfigs();switch(t){case c.List:return s(M,{autoHeight:this.props.autoHeight,value:this.props.data,configs:o.listConfigs});case c.Module:return s(w,{autoHeight:this.props.autoHeight,data:this.props.data,configs:o.moduleConfigs});default:return r(d,{variant:"subtitle1",children:["Unsupported view mode: ",String(t)]})}}},{key:"getContentState",value:function(t){var o=this.getInternalConfigs(),e=o.NoData,i=o.ErrorData,n=o.Skeleton;return this.props.error?{key:"error",content:s(i,{error:this.props.error})}:this.props.loading&&0===this.props.data.length&&n?{key:"skeleton",content:s(n,{mode:t})}:0!==this.props.data.length||this.props.loading?this.props.data.length>0?{key:"content-".concat(t,"-").concat(this.props.data.length),content:r(l,{children:[this.props.loading&&s(k,{}),s(y,{autoHeight:this.props.autoHeight,mode:t,moduleNode:this.renderContentByMode(c.Module),listNode:this.renderContentByMode(c.List)})]})}:{key:"loading",content:s(k,{})}:{key:"no-data",content:s(e,{mode:t})}}},{key:"render",value:function(){var t=this.getWrapperProps(),o=this.getContentState(this.state.currentMode),i=o.key,n=o.content;return s(C,e(e({},t),{},{"data-key":i,children:n}))}}])}())}var C=a("div",{shouldForwardProp:function(t){return"color"!==t&&"bgcolor"!==t&&"sx"!==t}})((function(t){var o=t.theme;return{position:"relative",display:"flex",flexDirection:"column",height:"100%",minHeight:"100px",flex:1,paddingLeft:o.spacing(2),paddingRight:o.spacing(2),marginLeft:o.spacing(-2),marginRight:o.spacing(-2),overflow:"hidden"}}));export{w as createViewMode};
 //# sourceMappingURL=create.view-mode.js.map

package/dist/src/data-view/create.view-mode.js.map

@@ -1 +1 @@
-{"version":3,"file":"create.view-mode.js","sources":["../../../src/data-view/create.view-mode.tsx"],"sourcesContent":["import React, { ComponentType, useState, useEffect, useMemo, useCallback } from 'react'\r\nimport { styled, Typography } from '@mui/material'\r\nimport { motion, AnimatePresence, Variants } from 'framer-motion'\r\nimport { createViewModeList, createViewModeModule, IViewModeListProps, IViewModeModuleProps } from './view-mode.content'\r\nimport { EViewMode, IViewModeConfigs, IViewModeElementProps, IViewModeValidModel } from './view-mode.types'\r\nimport { LoadingError, LoadingNoData, LoadingOverlay, LoadingWaiting } from './view-mode.units'\r\n\r\ninterface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {}\r\n\r\n/**\r\n * Props for ViewMode component\r\n * @template T - Type extending IViewModeValidModel\r\n */\r\ninterface IViewModeProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  viewMode?: EViewMode\r\n  ready?: boolean\r\n  loading?: boolean\r\n  error?: string\r\n  slots?: IViewModeSlots<T>\r\n}\r\n\r\n// Animation variants for smooth transitions between states\r\nconst animationVariants: Variants = {\r\n  hidden: { opacity: 0, y: 8, scale: 0.98 },\r\n  visible: { opacity: 1, y: 0, scale: 1 },\r\n  exit: { opacity: 0, y: -8, scale: 0.98 }\r\n}\r\n\r\n// Optimized animation timing for better UX\r\nconst animationTransition = {\r\n  duration: 0.25,\r\n  ease: [0.25, 0.1, 0.25, 1] // cubic-bezier for smoother animation\r\n}\r\n\r\nexport function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>> {\r\n  // Pre-memoized components for better performance\r\n  const MemoizedContentModeModule = createViewModeModule<T>()\r\n  const MemoizedContentModeList = createViewModeList<T>()\r\n\r\n  const ViewMode: React.FC<IViewModeProps<T>> = (props) => {\r\n    const [currentMode, setCurrentMode] = useState<EViewMode>(props.viewMode || EViewMode.Module)\r\n\r\n    // Merge configs from props and default configs to allow customization\r\n    const getInternalConfigs = useCallback(() => {\r\n      const columns = Object.assign({}, configs?.list?.columns, props.slots?.list?.columns)\r\n      const listConfigs = Object.assign({}, configs?.list, props.slots?.list, { columns })\r\n      return {\r\n        NoData: props.slots?.NoData ?? configs?.NoData ?? LoadingNoData,\r\n        Skeleton: props.slots?.Skeleton ?? configs?.Skeleton ?? LoadingWaiting,\r\n        ErrorData: props.slots?.ErrorData ?? configs?.ErrorData ?? LoadingError,\r\n        listConfigs,\r\n        moduleConfigs: Object.assign({}, configs?.module, props.slots?.module)\r\n      }\r\n    }, [props.slots])\r\n\r\n    // Extract wrapper props separately\r\n    const getWrapperProps = useCallback(() => {\r\n      return Object.assign({}, configs?.wrapProps, props.slots?.wrapProps)\r\n    }, [props.slots])\r\n\r\n    // Render content based on current view mode (List/Module)\r\n    const renderContentByMode = useCallback(\r\n      (currentMode: EViewMode) => {\r\n        const internalConfigs = getInternalConfigs()\r\n\r\n        switch (currentMode) {\r\n          case EViewMode.List:\r\n            return <MemoizedContentModeList value={props.data} configs={internalConfigs.listConfigs} />\r\n          case EViewMode.Module:\r\n            return <MemoizedContentModeModule data={props.data} configs={internalConfigs.moduleConfigs} />\r\n          default:\r\n            return <Typography variant='subtitle1'>Unsupported view mode: {currentMode}</Typography>\r\n        }\r\n      },\r\n      [props.data, getInternalConfigs]\r\n    )\r\n\r\n    // State management with clear priority order to prevent multiple renders\r\n    const getContentState = useCallback(\r\n      (currentMode: EViewMode) => {\r\n        const { NoData, ErrorData, Skeleton } = getInternalConfigs()\r\n\r\n        // 1. Error state - highest priority\r\n        if (props.error) {\r\n          return { key: 'error', content: <ErrorData error={props.error} /> }\r\n        }\r\n\r\n        // 2. Loading state with empty data (skeleton)\r\n        if (props.loading && props.data.length === 0 && Skeleton) {\r\n          return { key: 'skeleton', content: <Skeleton mode={currentMode} /> }\r\n        }\r\n\r\n        // 3. No data state (not loading and no data)\r\n        if (props.data.length === 0 && !props.loading) {\r\n          return { key: 'no-data', content: <NoData mode={currentMode} /> }\r\n        }\r\n\r\n        // 4. Content state with data (might be loading additional data)\r\n        if (props.data.length > 0) {\r\n          return {\r\n            key: `content-${currentMode}-${props.data.length}`,\r\n            content: (\r\n              <>\r\n                {props.loading && <LoadingOverlay />}\r\n                <AnimatePresence mode='wait'>\r\n                  <motion.div\r\n                    key={currentMode}\r\n                    variants={animationVariants}\r\n                    initial='hidden'\r\n                    animate='visible'\r\n                    exit='exit'\r\n                    transition={animationTransition}\r\n                  >\r\n                    {renderContentByMode(currentMode)}\r\n                  </motion.div>\r\n                </AnimatePresence>\r\n              </>\r\n            )\r\n          }\r\n        }\r\n\r\n        // 5. Fallback - loading without skeleton\r\n        return { key: 'loading', content: <LoadingOverlay /> }\r\n      },\r\n      [props.error, props.loading, props.data, getInternalConfigs, renderContentByMode]\r\n    )\r\n\r\n    // Main render method\r\n    const renderContent = useCallback(\r\n      (currentMode: EViewMode) => {\r\n        const { key, content } = getContentState(currentMode)\r\n\r\n        // Single AnimatePresence wrapper for smooth state transitions\r\n        return (\r\n          <AnimatePresence mode='wait'>\r\n            <motion.div key={key} variants={animationVariants} initial='hidden' animate='visible' exit='exit' transition={animationTransition} layout>\r\n              {content}\r\n            </motion.div>\r\n          </AnimatePresence>\r\n        )\r\n      },\r\n      [getContentState]\r\n    )\r\n\r\n    const wrapperProps = useMemo(() => getWrapperProps(), [getWrapperProps])\r\n\r\n    useEffect(() => {\r\n      if (props.viewMode) {\r\n        setCurrentMode(props.viewMode)\r\n      }\r\n    }, [props.viewMode])\r\n\r\n    return (\r\n      <Wrap\r\n        layout='size'\r\n        transition={{\r\n          layout: { duration: 0.3, ease: [0.4, 0, 0.2, 1] },\r\n          opacity: { duration: 0.2 }\r\n        }}\r\n        {...wrapperProps}\r\n      >\r\n        {renderContent(currentMode)}\r\n      </Wrap>\r\n    )\r\n  }\r\n\r\n  // Memoize component to prevent unnecessary re-renders\r\n  return React.memo(ViewMode)\r\n}\r\n\r\nconst Wrap = styled(motion.div, {\r\n  // Only forward specific props to prevent MUI system props from being passed to DOM\r\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'bgcolor' && prop !== 'sx'\r\n})({\r\n  position: 'relative',\r\n  // Remove overflow hidden to allow natural animations\r\n  display: 'flex',\r\n  flexDirection: 'column'\r\n})\r\n"],"names":["animationVariants","hidden","opacity","y","scale","visible","exit","animationTransition","duration","ease","createViewMode","configs","MemoizedContentModeModule","createViewModeModule","MemoizedContentModeList","createViewModeList","ViewMode","props","_useState","useState","viewMode","EViewMode","Module","_useState2","_slicedToArray","currentMode","setCurrentMode","getInternalConfigs","useCallback","_configs$list","_props$slots","_props$slots2","_ref","_props$slots$NoData","_props$slots3","_ref2","_props$slots$Skeleton","_props$slots4","_ref3","_props$slots$ErrorDat","_props$slots5","_props$slots6","columns","Object","assign","list","slots","listConfigs","NoData","LoadingNoData","Skeleton","LoadingWaiting","ErrorData","LoadingError","moduleConfigs","module","getWrapperProps","_props$slots7","wrapProps","renderContentByMode","internalConfigs","List","_jsx","value","data","_jsxs","Typography","variant","children","getContentState","_getInternalConfigs","error","key","content","loading","length","mode","concat","_Fragment","LoadingOverlay","AnimatePresence","motion","div","variants","initial","animate","transition","renderContent","_getContentState","layout","wrapperProps","useMemo","useEffect","Wrap","_objectSpread","React","memo","styled","shouldForwardProp","prop","position","display","flexDirection"],"mappings":"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"}
+{"version":3,"file":"create.view-mode.js","sources":["../../../src/data-view/create.view-mode.tsx"],"sourcesContent":["import { styled, Typography } from '@mui/material'\r\nimport { ComponentType, memo, PureComponent } from 'react'\r\nimport { createViewModeList, createViewModeModule } from './view-mode.content'\r\nimport { EViewMode, IViewModeConfigs, IViewModeValidModel } from './view-mode.types'\r\nimport { LoadingError, LoadingNoData, LoadingOverlay, LoadingWaiting } from './view-mode.units'\r\nimport AnimationSwitch from './animation-switch'\r\n\r\ninterface IViewModeSlots<T extends IViewModeValidModel> extends IViewModeConfigs<T> {}\r\n\r\n/**\r\n * Props for ViewMode component\r\n * @template T - Type extending IViewModeValidModel\r\n */\r\ninterface IViewModeProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  viewMode?: EViewMode\r\n  ready?: boolean\r\n  autoHeight?: boolean\r\n  loading?: boolean\r\n  error?: string\r\n  slots?: IViewModeSlots<T>\r\n}\r\n\r\nexport function createViewMode<T extends IViewModeValidModel>(configs?: IViewModeConfigs<T>): ComponentType<IViewModeProps<T>> {\r\n  // Pre-memoized components for better performance\r\n  const MemoizedContentModeModule = createViewModeModule<T>()\r\n  const MemoizedContentModeList = createViewModeList<T>()\r\n\r\n  type State = {\r\n    currentMode: EViewMode\r\n  }\r\n\r\n  class ViewMode extends PureComponent<IViewModeProps<T>, State> {\r\n    constructor(props: IViewModeProps<T>) {\r\n      super(props)\r\n      this.state = { currentMode: props.viewMode || EViewMode.Module }\r\n    }\r\n\r\n    componentDidUpdate(prevProps: IViewModeProps<T>) {\r\n      if (prevProps.viewMode !== this.props.viewMode && this.props.viewMode) {\r\n        this.setState({ currentMode: this.props.viewMode })\r\n      }\r\n    }\r\n\r\n    getInternalConfigs() {\r\n      const columns = Object.assign({}, configs?.list?.columns, this.props.slots?.list?.columns)\r\n      const listConfigs = Object.assign({}, configs?.list, this.props.slots?.list, { columns })\r\n      return {\r\n        NoData: this.props.slots?.NoData ?? configs?.NoData ?? LoadingNoData,\r\n        Skeleton: this.props.slots?.Skeleton ?? configs?.Skeleton ?? LoadingWaiting,\r\n        ErrorData: this.props.slots?.ErrorData ?? configs?.ErrorData ?? LoadingError,\r\n        listConfigs,\r\n        moduleConfigs: Object.assign({}, configs?.module, this.props.slots?.module)\r\n      }\r\n    }\r\n\r\n    getWrapperProps() {\r\n      return Object.assign({}, configs?.wrapProps, this.props.slots?.wrapProps)\r\n    }\r\n\r\n    renderContentByMode(currentMode: EViewMode) {\r\n      const internalConfigs = this.getInternalConfigs()\r\n\r\n      switch (currentMode) {\r\n        case EViewMode.List:\r\n          return <MemoizedContentModeList autoHeight={this.props.autoHeight} value={this.props.data} configs={internalConfigs.listConfigs} />\r\n        case EViewMode.Module:\r\n          return <MemoizedContentModeModule autoHeight={this.props.autoHeight} data={this.props.data} configs={internalConfigs.moduleConfigs} />\r\n        default:\r\n          return <Typography variant='subtitle1'>Unsupported view mode: {String(currentMode)}</Typography>\r\n      }\r\n    }\r\n\r\n    getContentState(currentMode: EViewMode) {\r\n      const { NoData, ErrorData, Skeleton } = this.getInternalConfigs()\r\n\r\n      if (this.props.error) {\r\n        return { key: 'error', content: <ErrorData error={this.props.error} /> }\r\n      }\r\n\r\n      if (this.props.loading && this.props.data.length === 0 && Skeleton) {\r\n        return { key: 'skeleton', content: <Skeleton mode={currentMode} /> }\r\n      }\r\n\r\n      if (this.props.data.length === 0 && !this.props.loading) {\r\n        return { key: 'no-data', content: <NoData mode={currentMode} /> }\r\n      }\r\n\r\n      if (this.props.data.length > 0) {\r\n        return {\r\n          key: `content-${currentMode}-${this.props.data.length}`,\r\n          content: (\r\n            <>\r\n              {this.props.loading && <LoadingOverlay />}\r\n              {/* Use AnimationSwitch to handle crossfade + measurement */}\r\n              <AnimationSwitch\r\n                autoHeight={this.props.autoHeight}\r\n                mode={currentMode}\r\n                moduleNode={this.renderContentByMode(EViewMode.Module)}\r\n                listNode={this.renderContentByMode(EViewMode.List)}\r\n              />\r\n            </>\r\n          )\r\n        }\r\n      }\r\n\r\n      return { key: 'loading', content: <LoadingOverlay /> }\r\n    }\r\n\r\n    render() {\r\n      const wrapperProps = this.getWrapperProps()\r\n\r\n      const { key, content } = this.getContentState(this.state.currentMode)\r\n\r\n      return (\r\n        <Wrap {...(wrapperProps as any)} data-key={key}>\r\n          {content}\r\n        </Wrap>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewMode as unknown as ComponentType<IViewModeProps<T>>)\r\n}\r\n\r\nconst Wrap = styled('div', {\r\n  // Only forward specific props to prevent MUI system props from being passed to DOM\r\n  shouldForwardProp: (prop) => prop !== 'color' && prop !== 'bgcolor' && prop !== 'sx'\r\n})(({ theme }) => ({\r\n  position: 'relative',\r\n  // Remove overflow hidden to allow natural animations\r\n  display: 'flex',\r\n  flexDirection: 'column',\r\n  height: '100%',\r\n  minHeight: '100px',\r\n  flex: 1,\r\n  paddingLeft: theme.spacing(2),\r\n  paddingRight: theme.spacing(2),\r\n  marginLeft: theme.spacing(-2),\r\n  marginRight: theme.spacing(-2),\r\n  overflow: 'hidden'\r\n}))\r\n"],"names":["createViewMode","configs","MemoizedContentModeModule","createViewModeModule","MemoizedContentModeList","createViewModeList","memo","ViewMode","props","_this","_classCallCheck","_callSuper","state","currentMode","viewMode","EViewMode","Module","_inherits","PureComponent","_createClass","key","value","prevProps","this","setState","_configs$list","_this$props$slots","_this$props$slots2","_ref","_this$props$slots$NoD","_this$props$slots3","_ref2","_this$props$slots$Ske","_this$props$slots4","_ref3","_this$props$slots$Err","_this$props$slots5","_this$props$slots6","columns","Object","assign","list","slots","listConfigs","NoData","LoadingNoData","Skeleton","LoadingWaiting","ErrorData","LoadingError","moduleConfigs","module","_this$props$slots7","wrapProps","internalConfigs","getInternalConfigs","List","_jsx","autoHeight","data","_jsxs","Typography","variant","children","String","_this$getInternalConf","error","content","loading","length","mode","concat","_Fragment","LoadingOverlay","AnimationSwitch","moduleNode","renderContentByMode","listNode","wrapperProps","getWrapperProps","_this$getContentState","getContentState","Wrap","_objectSpread","styled","shouldForwardProp","prop","_ref4","theme","position","display","flexDirection","height","minHeight","flex","paddingLeft","spacing","paddingRight","marginLeft","marginRight","overflow"],"mappings":"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"}

package/dist/src/data-view/view-mode.content.js

@@ -1,2 +1,2 @@
-import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as u}from"react";import{styled as d,colors as c,Grid as p,Typography as m}from"@mui/material";import{DataGrid as f}from"@mui/x-data-grid";var g=["Element"],b=["Element"],v=function(){return s(m,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function h(){return l(function(){function a(r){var o;return i(this,a),(o=n(this,a,[r])).ElementComponent=r.configs.Element||v,o}return r(a,u),o(a,[{key:"shouldComponentUpdate",value:function(r){var o=this.props.configs,t=o.Element,i=e(o,g),n=r.configs,a=n.Element,s=e(n,b);t!==a&&(this.ElementComponent=r.configs.Element||v);var l=JSON.stringify(i)!==JSON.stringify(s);return JSON.stringify(this.props.data)!==JSON.stringify(r.data)||l}},{key:"render",value:function(){var r=this.ElementComponent,o=this.props,e=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return s(p,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{children:e.map((function(o,e){var a=i.getElementId?i.getElementId(o):e.toString(),l=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:e}):i.elementWrapProps||{};return s(p,t(t(t({item:!0},n),l),{},{children:s(r,{data:o,index:e})}),a)}))}))}}])}())}function y(){var e=function(r){var o,e=null!==(o=null==r?void 0:r.columns)&&void 0!==o?o:{};return Object.keys(e).map((function(r){var o=e[r];return t({field:String(r),sortable:!1},o)}))};return l(function(){function l(r){var o;return i(this,l),o=n(this,l,[r]),a(o,"columns",[]),o.columns=e(r.configs),o}return r(l,u),o(l,[{key:"shouldComponentUpdate",value:function(r){var o=JSON.stringify(this.props.value)!==JSON.stringify(r.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(r.configs);return t&&(this.columns=e()),o||t}},{key:"render",value:function(){var r,o,e,i,n;if(this.props.configs&&Object.keys(null!==(r=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==r?r:{}).length>0){var a=this.props.value;return s(x,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,getRowId:null===(e=this.props.configs)||void 0===e?void 0:e.getRowId,rows:a,rowHeight:null===(i=this.props.configs)||void 0===i?void 0:i.rowHeight,columnHeaderHeight:48,getRowSpacing:function(r){return{top:r.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0},null===(n=this.props.slots)||void 0===n?void 0:n.dataGridProps))}}}])}())}var x=d(f)((function(r){var o=r.theme;return{"*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}}));export{y as createViewModeList,h as createViewModeModule};
+import{inherits as r,createClass as o,objectWithoutProperties as e,objectSpread2 as t,classCallCheck as i,callSuper as n,defineProperty as a}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsx as s}from"react/jsx-runtime";import{memo as l,Component as u}from"react";import{styled as d,colors as c,Box as p,Grid as m,Stack as f,Typography as h}from"@mui/material";import{DataGrid as g}from"@mui/x-data-grid";var b=["Element"],v=["Element"],x=function(){return s(h,{variant:"subtitle1",color:"textSecondary",children:"No items to display"})};function y(){return l(function(){function a(r){var o;return i(this,a),(o=n(this,a,[r])).ElementComponent=r.configs.Element||x,o}return r(a,u),o(a,[{key:"shouldComponentUpdate",value:function(r){var o=this.props.configs,t=o.Element,i=e(o,b),n=r.configs,a=n.Element,s=e(n,v);t!==a&&(this.ElementComponent=r.configs.Element||x);var l=JSON.stringify(i)!==JSON.stringify(s);return JSON.stringify(this.props.data)!==JSON.stringify(r.data)||l}},{key:"render",value:function(){var r=this.ElementComponent,o=this.props,e=o.data,i=o.configs,n=i.size||{xs:12,sm:6,md:4,lg:3};return s(p,{sx:this.props.autoHeight?{}:{height:"100%",overflow:"auto"},children:s(m,t(t({container:!0,spacing:i.spacing||0},i.wrapProps),{},{style:{height:"100%"},children:e.map((function(o,e){var a=i.getElementId?i.getElementId(o):e.toString(),l=i.elementWrapPropsGetter?i.elementWrapPropsGetter({data:o,index:e}):i.elementWrapProps||{};return s(m,t(t(t({item:!0},n),l),{},{children:s(r,{data:o,index:e})}),a)}))}))})}}])}())}function S(){var e=function(r){var o,e=null!==(o=null==r?void 0:r.columns)&&void 0!==o?o:{};return Object.keys(e).map((function(r){var o=e[r];return t({field:String(r),sortable:!1},o)}))};return l(function(){function l(r){var o;return i(this,l),o=n(this,l,[r]),a(o,"columns",[]),o.columns=e(r.configs),o}return r(l,u),o(l,[{key:"shouldComponentUpdate",value:function(r){var o=JSON.stringify(this.props.value)!==JSON.stringify(r.value),t=JSON.stringify(this.props.configs)!==JSON.stringify(r.configs);return t&&(this.columns=e()),o||t}},{key:"render",value:function(){var r,o,e,i,n;if(this.props.configs&&Object.keys(null!==(r=null===(o=this.props.configs)||void 0===o?void 0:o.columns)&&void 0!==r?r:{}).length>0){var a=this.props.value;return s(f,{sx:{flex:1,width:"100%",height:"100%",minHeight:"100px"},children:s(C,t({hideFooter:!0,disableColumnFilter:!0,disableColumnMenu:!0,getRowId:null===(e=this.props.configs)||void 0===e?void 0:e.getRowId,rows:a,rowHeight:null===(i=this.props.configs)||void 0===i?void 0:i.rowHeight,columnHeaderHeight:48,getRowSpacing:function(r){return{top:r.isFirstVisible?8:4,bottom:4}},columns:this.columns,disableColumnSelector:!0,autoHeight:this.props.autoHeight},null===(n=this.props.slots)||void 0===n?void 0:n.dataGridProps))})}}}])}())}var C=d(g,{shouldForwardProp:function(r){return"autoHeight"!==r}})((function(r){var o=r.theme,e=r.ownerState,t=null==e?void 0:e.autoHeight;return{height:t?"auto":"100%",width:"100%",display:t?"block":"flex",flexDirection:t?void 0:"column","*":{boxSizing:"border-box"},"--custom-border-color":"rgba(145, 158, 171, 0.16)","--custom-bg-color":o.palette.background.paper,"--DataGrid-rowBorderColor":"transparent",borderColor:"transparent",".MuiDataGrid-cell":{"--rowBorderColor":"transparent",display:"flex",alignItems:"center"},".MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus":{outline:"none"},".MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within":{outline:"none"},".MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible":{outline:"none"},".MuiDataGrid-columnHeaders":{backgroundColor:c.grey[50],borderColor:"transparent",borderRadius:"6px"},".MuiDataGrid-virtualScroller":t?{minHeight:0}:{flex:1,minHeight:0},".MuiDataGrid-virtualScrollerContent":{".MuiDataGrid-row":{borderRadius:"6px",border:"none",transition:"all 0.2s ease",backgroundColor:"var(--custom-bg-color)",".MuiDataGrid-cell":{backgroundColor:"var(--custom-bg-color)",border:"none",borderTop:"1px dashed var(--custom-border-color)",borderBottom:"1px dashed var(--custom-border-color)","&:first-of-type":{borderLeft:"1px dashed var(--custom-border-color)",borderRadius:"6px 0 0 6px"},"&:last-of-type":{borderRight:"1px dashed var(--custom-border-color)",borderRadius:"0 6px 6px 0"}},"&:hover":{"--custom-border-color":o.palette.divider,"--custom-bg-color":c.grey[50],transform:"translateY(-1px)",boxShadow:"rgba(99, 99, 99, 0.1) 0px 2px 8px 0px",".MuiDataGrid-cell":{borderTopStyle:"solid",borderBottomStyle:"solid","&:first-of-type":{borderLeftStyle:"solid"},"&:last-of-type":{borderRightStyle:"solid"}}}}}}}));export{S as createViewModeList,y as createViewModeModule};
 //# sourceMappingURL=view-mode.content.js.map

package/dist/src/data-view/view-mode.content.js.map

@@ -1 +1 @@
-{"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n  <Typography variant='subtitle1' color='textSecondary'>\r\n    No items to display\r\n  </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  configs: IViewModeModuleConfig<T>\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n  class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n    private ElementComponent\r\n    constructor(props: IViewModeModuleProps<T>) {\r\n      super(props)\r\n      this.ElementComponent = props.configs.Element || EmptyModule\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n      const { Element: currentElement, ...currentConfig } = this.props.configs\r\n      const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n      const checkElementDiff = currentElement !== nextElement\r\n      if (checkElementDiff) {\r\n        this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n      }\r\n\r\n      const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n      const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n      return checkDataDiff || checkConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const { ElementComponent } = this\r\n      const { data, configs } = this.props\r\n      const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n      return (\r\n        <Grid container spacing={configs.spacing || 0} {...configs.wrapProps}>\r\n          {data.map((item, index) => {\r\n            const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n            const itemProps = configs.elementWrapPropsGetter ? configs.elementWrapPropsGetter({ data: item, index }) : configs.elementWrapProps || {}\r\n            return (\r\n              <Grid item key={key} {...size} {...itemProps}>\r\n                <ElementComponent data={item} index={index} />\r\n              </Grid>\r\n            )\r\n          })}\r\n        </Grid>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n  value: T[]\r\n  configs: IViewModeListConfig<T>\r\n  slots?: {\r\n    dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n  }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n  const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n    const cols: GridColsDef<T> = configs?.columns ?? {}\r\n    const fields = Object.keys(cols) as (keyof T)[]\r\n    return fields.map((field) => {\r\n      const config = cols[field]\r\n      return { field: String(field), sortable: false, ...config }\r\n    })\r\n  }\r\n\r\n  class ViewModeList extends Component<IViewModeListProps<T>> {\r\n    private columns: GridColDef[] = []\r\n    constructor(props: IViewModeListProps<T>) {\r\n      super(props)\r\n      this.columns = genarateColumns(props.configs)\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n      const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n      const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n      if (checkListConfigsDiff) {\r\n        this.columns = genarateColumns()\r\n      }\r\n      return checkValueDiff || checkListConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n      if (!isRender) {\r\n        return\r\n      }\r\n      const rows = this.props.value as GridValidRowModel[]\r\n      return (\r\n        <DataGridCustom\r\n          hideFooter\r\n          // disableColumnSorting\r\n          disableColumnFilter\r\n          disableColumnMenu\r\n          getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n          rows={rows}\r\n          rowHeight={this.props.configs?.rowHeight}\r\n          columnHeaderHeight={48}\r\n          getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n          columns={this.columns}\r\n          disableColumnSelector\r\n          {...this.props.slots?.dataGridProps}\r\n        />\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid)(({ theme }) => ({\r\n  '*': {\r\n    boxSizing: 'border-box'\r\n  },\r\n  '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n  '--custom-bg-color': theme.palette.background.paper,\r\n  '--DataGrid-rowBorderColor': 'transparent',\r\n  borderColor: 'transparent',\r\n  '.MuiDataGrid-cell': {\r\n    '--rowBorderColor': 'transparent',\r\n    display: 'flex',\r\n    alignItems: 'center'\r\n  },\r\n  '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n    outline: 'none'\r\n  },\r\n  '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n    outline: 'none'\r\n  },\r\n  '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n    outline: 'none'\r\n  },\r\n  '.MuiDataGrid-columnHeaders': {\r\n    backgroundColor: colors.grey[50],\r\n    borderColor: 'transparent',\r\n    borderRadius: '6px'\r\n  },\r\n  '.MuiDataGrid-virtualScrollerContent': {\r\n    '.MuiDataGrid-row': {\r\n      borderRadius: '6px',\r\n      border: 'none',\r\n      transition: 'all 0.2s ease',\r\n      backgroundColor: 'var(--custom-bg-color)',\r\n      '.MuiDataGrid-cell': {\r\n        backgroundColor: 'var(--custom-bg-color)',\r\n        border: 'none',\r\n        borderTop: '1px dashed var(--custom-border-color)',\r\n        borderBottom: '1px dashed var(--custom-border-color)',\r\n        '&:first-of-type': {\r\n          borderLeft: '1px dashed var(--custom-border-color)',\r\n          borderRadius: '6px 0 0 6px'\r\n        },\r\n        '&:last-of-type': {\r\n          borderRight: '1px dashed var(--custom-border-color)',\r\n          borderRadius: '0 6px 6px 0'\r\n        }\r\n      },\r\n      '&:hover': {\r\n        '--custom-border-color': theme.palette.divider,\r\n        '--custom-bg-color': colors.grey[50],\r\n        transform: 'translateY(-1px)',\r\n        boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n        '.MuiDataGrid-cell': {\r\n          borderTopStyle: 'solid',\r\n          borderBottomStyle: 'solid',\r\n          '&:first-of-type': {\r\n            borderLeftStyle: 'solid'\r\n          },\r\n          '&:last-of-type': {\r\n            borderRightStyle: 'solid'\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n}))\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Grid","_objectSpread","container","spacing","wrapProps","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","_ref2","theme","boxSizing","palette","background","paper","borderColor","display","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"4aAMMA,EAAkB,WAAP,OACfC,EAACC,EAAU,CAACC,QAAQ,YAAYC,MAAM,gBAAeC,SAAA,uBAExC,WAQCC,IAyCd,OAAOC,aAtCL,SAAAC,EAAYC,GAA8B,IAAAC,EAEoB,OAFpBC,OAAAH,IACxCE,EAAAE,EAAAJ,KAAAA,GAAMC,KACDI,iBAAmBJ,EAAMK,QAAQC,SAAWf,EAAWU,CAC9D,CAAC,OAAAM,EAAAR,EAL0BS,GAK1BC,EAAAV,EAAA,CAAA,CAAAW,IAAA,wBAAAC,MAED,SAAsBC,GACpB,IAAAC,EAAsDC,KAAKd,MAAMK,QAAhDU,EAAcF,EAAvBP,QAA4BU,EAAaC,EAAAJ,EAAAK,GACjDC,EAAiDP,EAAUP,QAA1Ce,EAAWD,EAApBb,QAAyBe,EAAWJ,EAAAE,EAAAG,GACnBP,IAAmBK,IAE1CN,KAAKV,iBAAmBQ,EAAUP,QAAQC,SAAWf,GAGvD,IAAMgC,EAAmBC,KAAKC,UAAUT,KAAmBQ,KAAKC,UAAUJ,GAE1E,OADsBG,KAAKC,UAAUX,KAAKd,MAAM0B,QAAUF,KAAKC,UAAUb,EAAUc,OAC3DH,CAC1B,GAAC,CAAAb,IAAA,SAAAC,MAED,WACE,IAAQP,EAAqBU,KAArBV,iBACRuB,EAA0Bb,KAAKd,MAAvB0B,EAAIC,EAAJD,KAAMrB,EAAOsB,EAAPtB,QACRuB,EAAOvB,EAAQuB,MAAQ,CAAEC,GAAI,GAAIC,GAAI,EAAGC,GAAI,EAAGC,GAAI,GACzD,OACExC,EAACyC,EAAIC,EAAAA,EAAA,CAACC,WAAU,EAAAC,QAAS/B,EAAQ+B,SAAW,GAAO/B,EAAQgC,WAAS,GAAA,CACjEzC,SAAA8B,EAAKY,KAAI,SAACC,EAAMC,GACf,IAAM9B,EAAML,EAAQoC,aAAepC,EAAQoC,aAAaF,GAAQC,EAAME,WAChEC,EAAYtC,EAAQuC,uBAAyBvC,EAAQuC,uBAAuB,CAAElB,KAAMa,EAAMC,MAAAA,IAAWnC,EAAQwC,kBAAoB,CAAE,EACzI,OACErD,EAACyC,EAAIC,EAAAA,EAAAA,EAAA,CAACK,SAAmBX,GAAUe,GAAS,GAAA,CAAA/C,SAC1CJ,EAACY,GAAiBsB,KAAMa,EAAMC,MAAOA,MADvB9B,EAInB,MAGP,IAAC,IAIL,UAYgBoC,IACd,IAAMC,EAAkB,SAAC1C,GAAkD,IAAA2C,EACnEC,EAAuCD,QAAnCA,EAAmB3C,aAAO,EAAPA,EAAS6C,mBAAOF,EAAAA,EAAI,CAAE,EAEnD,OADeG,OAAOC,KAAKH,GACbX,KAAI,SAACe,GACjB,IAAMC,EAASL,EAAKI,GACpB,OAAAnB,EAAA,CAASmB,MAAOE,OAAOF,GAAQG,UAAU,GAAUF,EACrD,GACD,EA2CD,OAAOxD,aAvCL,SAAA2D,EAAYzD,GAA4B,IAAA0D,EAEO,OAFPxD,OAAAuD,GACtCC,EAAAvD,EAAAsD,KAAAA,GAAMzD,IAAM2D,EAAAD,EAAA,UAFkB,IAG9BA,EAAKR,QAAUH,EAAgB/C,EAAMK,SAAQqD,CAC/C,CAAC,OAAAnD,EAAAkD,EALwBjD,GAKxBC,EAAAgD,EAAA,CAAA,CAAA/C,IAAA,wBAAAC,MAED,SAAsBC,GACpB,IAAMgD,EAAiBpC,KAAKC,UAAUX,KAAKd,MAAMW,SAAWa,KAAKC,UAAUb,EAAUD,OAC/EkD,EAAuBrC,KAAKC,UAAUX,KAAKd,MAAMK,WAAamB,KAAKC,UAAUb,EAAUP,SAI7F,OAHIwD,IACF/C,KAAKoC,QAAUH,KAEVa,GAAkBC,CAC3B,GAAC,CAAAnD,IAAA,SAAAC,MAED,WAAM,IAAAmD,EAAAC,EAAAC,EAAAC,EAAAC,EAEJ,GADiBpD,KAAKd,MAAMK,SAAW8C,OAAOC,KAAgCU,QAA5BA,UAAAC,EAACjD,KAAKd,MAAMK,eAAO,IAAA0D,OAAA,EAAlBA,EAAoBb,eAAOY,IAAAA,EAAAA,EAAI,IAAIK,OAAS,EAC/F,CAGA,IAAMC,EAAOtD,KAAKd,MAAMW,MACxB,OACEnB,EAAC6E,EAAcnC,EAAA,CACboC,YAAU,EAEVC,uBACAC,mBAAiB,EACjBC,SAA4BT,QAApBA,EAAElD,KAAKd,MAAMK,eAAX2D,IAAkBA,OAAlBA,EAAAA,EAAoBS,SAC9BL,KAAMA,EACNM,UAA6BT,QAApBA,EAAEnD,KAAKd,MAAMK,eAAX4D,IAAkBA,OAAlBA,EAAAA,EAAoBS,UAC/BC,mBAAoB,GACpBC,cAAe,SAAFC,GAAmB,MAAQ,CAAEC,IAAVD,EAAdE,eAA8C,EAAI,EAAGC,OAAQ,EAAI,EACnF9B,QAASpC,KAAKoC,QACd+B,uBAAqB,GACDf,QADCA,EACjBpD,KAAKd,MAAMkF,aAAXhB,IAAgBA,OAAhBA,EAAAA,EAAkBiB,eAfzB,CAkBH,IAAC,IAIL,CAEA,IAAMd,EAAiBe,EAAOC,EAAPD,EAAiB,SAAAE,GAAA,IAAGC,EAAKD,EAALC,MAAK,MAAQ,CACtD,IAAK,CACHC,UAAW,cAEb,wBAAyB,4BACzB,oBAAqBD,EAAME,QAAQC,WAAWC,MAC9C,4BAA6B,cAC7BC,YAAa,cACb,oBAAqB,CACnB,mBAAoB,cACpBC,QAAS,OACTC,WAAY,UAEd,2DAA4D,CAC1DC,QAAS,QAEX,yEAA0E,CACxEA,QAAS,QAEX,iFAAkF,CAChFA,QAAS,QAEX,6BAA8B,CAC5BC,gBAAiBC,EAAOC,KAAK,IAC7BN,YAAa,cACbO,aAAc,OAEhB,sCAAuC,CACrC,mBAAoB,CAClBA,aAAc,MACdC,OAAQ,OACRC,WAAY,gBACZL,gBAAiB,yBACjB,oBAAqB,CACnBA,gBAAiB,yBACjBI,OAAQ,OACRE,UAAW,wCACXC,aAAc,wCACd,kBAAmB,CACjBC,WAAY,wCACZL,aAAc,eAEhB,iBAAkB,CAChBM,YAAa,wCACbN,aAAc,gBAGlB,UAAW,CACT,wBAAyBZ,EAAME,QAAQiB,QACvC,oBAAqBT,EAAOC,KAAK,IACjCS,UAAW,mBACXC,UAAW,wCACX,oBAAqB,CACnBC,eAAgB,QAChBC,kBAAmB,QACnB,kBAAmB,CACjBC,gBAAiB,SAEnB,iBAAkB,CAChBC,iBAAkB,aAM7B"}
+{"version":3,"file":"view-mode.content.js","sources":["../../../src/data-view/view-mode.content.tsx"],"sourcesContent":["import { Component, ComponentType, FC, memo } from 'react'\r\nimport { Typography, Grid, styled, colors, Stack, Box } from '@mui/material'\r\nimport { DataGrid, DataGridProps, GridColDef, GridRowIdGetter, GridValidRowModel } from '@mui/x-data-grid'\r\nimport { GridColsDef, IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from './view-mode.types'\r\n\r\n//#region Mode Module\r\nconst EmptyModule: FC = () => (\r\n  <Typography variant='subtitle1' color='textSecondary'>\r\n    No items to display\r\n  </Typography>\r\n)\r\n\r\nexport interface IViewModeModuleProps<T extends IViewModeValidModel> {\r\n  data: T[]\r\n  configs: IViewModeModuleConfig<T>\r\n  autoHeight?: boolean\r\n}\r\n\r\nexport function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>> {\r\n  class ViewModeModule extends Component<IViewModeModuleProps<T>> {\r\n    private ElementComponent\r\n    constructor(props: IViewModeModuleProps<T>) {\r\n      super(props)\r\n      this.ElementComponent = props.configs.Element || EmptyModule\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeModuleProps<T>>): boolean {\r\n      const { Element: currentElement, ...currentConfig } = this.props.configs\r\n      const { Element: nextElement, ...nextConfigs } = nextProps.configs\r\n      const checkElementDiff = currentElement !== nextElement\r\n      if (checkElementDiff) {\r\n        this.ElementComponent = nextProps.configs.Element || EmptyModule\r\n      }\r\n\r\n      const checkConfigsDiff = JSON.stringify(currentConfig) !== JSON.stringify(nextConfigs)\r\n      const checkDataDiff = JSON.stringify(this.props.data) !== JSON.stringify(nextProps.data)\r\n      return checkDataDiff || checkConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const { ElementComponent } = this\r\n      const { data, configs } = this.props\r\n      const size = configs.size || { xs: 12, sm: 6, md: 4, lg: 3 }\r\n      return (\r\n        <Box sx={this.props.autoHeight ? {} : { height: '100%', overflow: 'auto' }}>\r\n          <Grid container spacing={configs.spacing || 0} {...configs.wrapProps} style={{ height: '100%' }}>\r\n            {data.map((item, index) => {\r\n              const key = configs.getElementId ? configs.getElementId(item) : index.toString()\r\n              const itemProps = configs.elementWrapPropsGetter\r\n                ? configs.elementWrapPropsGetter({ data: item, index })\r\n                : configs.elementWrapProps || {}\r\n              return (\r\n                <Grid item key={key} {...size} {...itemProps}>\r\n                  <ElementComponent data={item} index={index} />\r\n                </Grid>\r\n              )\r\n            })}\r\n          </Grid>\r\n        </Box>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeModule)\r\n}\r\n//#endregion\r\n\r\n//#region View Mode List\r\nexport interface IViewModeListProps<T extends IViewModeValidModel> {\r\n  value: T[]\r\n  configs: IViewModeListConfig<T>\r\n  autoHeight?: boolean\r\n  slots?: {\r\n    dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>\r\n  }\r\n}\r\n\r\nexport function createViewModeList<T extends IViewModeValidModel>(): ComponentType<IViewModeListProps<T>> {\r\n  const genarateColumns = (configs?: IViewModeListConfig<T>): GridColDef[] => {\r\n    const cols: GridColsDef<T> = configs?.columns ?? {}\r\n    const fields = Object.keys(cols) as (keyof T)[]\r\n    return fields.map((field) => {\r\n      const config = cols[field]\r\n      return { field: String(field), sortable: false, ...config }\r\n    })\r\n  }\r\n\r\n  class ViewModeList extends Component<IViewModeListProps<T>> {\r\n    private columns: GridColDef[] = []\r\n    constructor(props: IViewModeListProps<T>) {\r\n      super(props)\r\n      this.columns = genarateColumns(props.configs)\r\n    }\r\n\r\n    shouldComponentUpdate(nextProps: Readonly<IViewModeListProps<T>>): boolean {\r\n      const checkValueDiff = JSON.stringify(this.props.value) !== JSON.stringify(nextProps.value)\r\n      const checkListConfigsDiff = JSON.stringify(this.props.configs) !== JSON.stringify(nextProps.configs)\r\n      if (checkListConfigsDiff) {\r\n        this.columns = genarateColumns()\r\n      }\r\n      return checkValueDiff || checkListConfigsDiff\r\n    }\r\n\r\n    render() {\r\n      const isRender = this.props.configs && Object.keys(this.props.configs?.columns ?? {}).length > 0\r\n      if (!isRender) {\r\n        return\r\n      }\r\n      const rows = this.props.value as GridValidRowModel[]\r\n      return (\r\n        <Stack sx={{ flex: 1, width: '100%', height: '100%', minHeight: '100px' }}>\r\n          <DataGridCustom\r\n            hideFooter\r\n            // disableColumnSorting\r\n            disableColumnFilter\r\n            disableColumnMenu\r\n            getRowId={this.props.configs?.getRowId as GridRowIdGetter<GridValidRowModel>}\r\n            rows={rows}\r\n            rowHeight={this.props.configs?.rowHeight}\r\n            columnHeaderHeight={48}\r\n            getRowSpacing={({ isFirstVisible }) => ({ top: isFirstVisible ? 8 : 4, bottom: 4 })}\r\n            columns={this.columns}\r\n            disableColumnSelector\r\n            autoHeight={this.props.autoHeight}\r\n            {...this.props.slots?.dataGridProps}\r\n          />\r\n        </Stack>\r\n      )\r\n    }\r\n  }\r\n\r\n  return memo(ViewModeList)\r\n}\r\n\r\nconst DataGridCustom = styled(DataGrid, { shouldForwardProp: (prop) => prop !== 'autoHeight' })<{\r\n  autoHeight?: boolean\r\n}>((params: any) => {\r\n  const { theme, ownerState } = params as any\r\n  const autoHeight = ownerState?.autoHeight\r\n  return {\r\n    // When `autoHeight` is true let the grid size to its content, otherwise fill parent.\r\n    height: autoHeight ? 'auto' : '100%',\r\n    width: '100%',\r\n    display: autoHeight ? 'block' : 'flex',\r\n    flexDirection: autoHeight ? undefined : 'column',\r\n    '*': {\r\n      boxSizing: 'border-box'\r\n    },\r\n    '--custom-border-color': 'rgba(145, 158, 171, 0.16)',\r\n    '--custom-bg-color': theme.palette.background.paper,\r\n    '--DataGrid-rowBorderColor': 'transparent',\r\n    borderColor: 'transparent',\r\n    '.MuiDataGrid-cell': {\r\n      '--rowBorderColor': 'transparent',\r\n      display: 'flex',\r\n      alignItems: 'center'\r\n    },\r\n    '.MuiDataGrid-cell:focus, .MuiDataGrid-columnHeader:focus': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-cell:focus-within, .MuiDataGrid-columnHeader:focus-within': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-cell.Mui-focusVisible, .MuiDataGrid-columnHeader.Mui-focusVisible': {\r\n      outline: 'none'\r\n    },\r\n    '.MuiDataGrid-columnHeaders': {\r\n      backgroundColor: colors.grey[50],\r\n      borderColor: 'transparent',\r\n      borderRadius: '6px'\r\n    },\r\n    '.MuiDataGrid-virtualScroller': autoHeight ? { minHeight: 0 } : { flex: 1, minHeight: 0 },\r\n    '.MuiDataGrid-virtualScrollerContent': {\r\n      '.MuiDataGrid-row': {\r\n        borderRadius: '6px',\r\n        border: 'none',\r\n        transition: 'all 0.2s ease',\r\n        backgroundColor: 'var(--custom-bg-color)',\r\n        '.MuiDataGrid-cell': {\r\n          backgroundColor: 'var(--custom-bg-color)',\r\n          border: 'none',\r\n          borderTop: '1px dashed var(--custom-border-color)',\r\n          borderBottom: '1px dashed var(--custom-border-color)',\r\n          '&:first-of-type': {\r\n            borderLeft: '1px dashed var(--custom-border-color)',\r\n            borderRadius: '6px 0 0 6px'\r\n          },\r\n          '&:last-of-type': {\r\n            borderRight: '1px dashed var(--custom-border-color)',\r\n            borderRadius: '0 6px 6px 0'\r\n          }\r\n        },\r\n        '&:hover': {\r\n          '--custom-border-color': theme.palette.divider,\r\n          '--custom-bg-color': colors.grey[50],\r\n          transform: 'translateY(-1px)',\r\n          boxShadow: 'rgba(99, 99, 99, 0.1) 0px 2px 8px 0px',\r\n          '.MuiDataGrid-cell': {\r\n            borderTopStyle: 'solid',\r\n            borderBottomStyle: 'solid',\r\n            '&:first-of-type': {\r\n              borderLeftStyle: 'solid'\r\n            },\r\n            '&:last-of-type': {\r\n              borderRightStyle: 'solid'\r\n            }\r\n          }\r\n        }\r\n      }\r\n    }\r\n  }\r\n})\r\n//#endregion\r\n"],"names":["EmptyModule","_jsx","Typography","variant","color","children","createViewModeModule","memo","ViewModeModule","props","_this","_classCallCheck","_callSuper","ElementComponent","configs","Element","_inherits","Component","_createClass","key","value","nextProps","_this$props$configs","this","currentElement","currentConfig","_objectWithoutProperties","_excluded","_nextProps$configs","nextElement","nextConfigs","_excluded2","checkConfigsDiff","JSON","stringify","data","_this$props","size","xs","sm","md","lg","Box","sx","autoHeight","height","overflow","Grid","_objectSpread","container","spacing","wrapProps","style","map","item","index","getElementId","toString","itemProps","elementWrapPropsGetter","elementWrapProps","createViewModeList","genarateColumns","_configs$columns","cols","columns","Object","keys","field","config","String","sortable","ViewModeList","_this2","_defineProperty","checkValueDiff","checkListConfigsDiff","_this$props$configs$c","_this$props$configs2","_this$props$configs3","_this$props$configs4","_this$props$slots","length","rows","Stack","flex","width","minHeight","DataGridCustom","hideFooter","disableColumnFilter","disableColumnMenu","getRowId","rowHeight","columnHeaderHeight","getRowSpacing","_ref","top","isFirstVisible","bottom","disableColumnSelector","slots","dataGridProps","styled","DataGrid","shouldForwardProp","prop","params","theme","ownerState","display","flexDirection","undefined","boxSizing","palette","background","paper","borderColor","alignItems","outline","backgroundColor","colors","grey","borderRadius","border","transition","borderTop","borderBottom","borderLeft","borderRight","divider","transform","boxShadow","borderTopStyle","borderBottomStyle","borderLeftStyle","borderRightStyle"],"mappings":"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"}

package/dist/src/form/decorator.form.js

@@ -1,2 +1,2 @@
-import{objectSpread2 as r,asyncToGenerator as e,objectWithoutProperties as t,regenerator as n}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as o,jsx as a}from"react/jsx-runtime";import{Grid as i,Button as s}from"@mui/material";import{getErrorMessage as l}from"./helpers.js";import{getFormFields as u,getFormValidators as c,getFormPreSubmit as m}from"./decorator.js";import d from"./validator.js";import p from"./create.input.js";import f from"./create.form-base.js";var b=["type","renderInput"],v=f({}),h=p({}),g=function(e){var n,i,s=e.type,u=e.renderInput,c=t(e,b),m=(null===(n=c.name)||void 0===n?void 0:n.toString())||"",d=(null===(i=c.data)||void 0===i?void 0:i[m])||c.defaultValue;return u?a(u,r({},c)):v.mapContext((function(e){var t=e.messageErrors,n=e.onBlur,i=l(e.messageErrors,c.name);switch(s){case String:return a(h,r(r({},c),{},{messageErrors:t,onBlur:n}));case Number:return a(h,r({slots:{textFieldProps:{type:"number"}},messageErrors:t,onBlur:n},c));case Boolean:return o("div",{children:[o("label",{children:[c.label||m,": "]}),a("input",{name:m,type:"checkbox",defaultChecked:d}),a("span",{style:{color:"red"},children:i.error?i.message:""})]});default:return o("div",{children:["Unsupported field type for ",m]})}}))},S=function(t){var l,p,f=u(t.configClass),b=c(t.configClass),h=m(t.configClass),S=function(){var r=e(n().m((function r(e){var o,a;return n().w((function(r){for(;;)switch(r.n){case 0:if(o=e,null==h||!h.handler){r.n=4;break}return r.p=1,r.n=2,h.handler(e,t.data);case 2:null==(o=r.v)&&(o=e),r.n=4;break;case 3:throw r.p=3,a=r.v,console.error("PreSubmit handler error:",a),a;case 4:if(!t.onSubmit){r.n=5;break}return r.n=5,t.onSubmit(o);case 5:return r.a(2)}}),r,null,[[1,3]])})));return function(e){return r.apply(this,arguments)}}();return o(v.Form,{onSubmit:S,validate:new d(b),children:[a(i,{container:!0,spacing:2,children:f.map((function(e){return a(i,r(r({item:!0,xs:12},e.size),{},{children:a(g,r({data:t.data},e))}),e.name.toString())}))}),null!==(p=t.slots)&&void 0!==p&&p.renderSubmitButton?t.slots.renderSubmitButton():a(s,{variant:"contained",color:"primary",type:"submit",sx:{mt:2},children:"Submit"}),null===(l=t.slots)||void 0===l?void 0:l.bottom]})},y=function(e,t){return function(n){return a(S,r(r({configClass:e},t),n))}};export{g as DecoratorField,S as DecoratorForm,y as createDecoratorForm,S as default};
+import{objectSpread2 as r,asyncToGenerator as e,objectWithoutProperties as n,regenerator as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import{jsxs as t,jsx as a}from"react/jsx-runtime";import{Box as i,Typography as s,Grid as l,Button as u}from"@mui/material";import{getErrorMessage as d}from"./helpers.js";import{getFormFields as c,getFormValidators as m,getFormPreSubmit as f,isFormRegistered as p}from"./decorator.js";import v from"./validator.js";import b from"./create.input.js";import g from"./create.form-base.js";var h=["type","renderInput"],y=g({}),S=b({}),x=function(e){var o,i,s=e.type,l=e.renderInput,u=n(e,h),c=(null===(o=u.name)||void 0===o?void 0:o.toString())||"",m=(null===(i=u.data)||void 0===i?void 0:i[c])||u.defaultValue;return l?a(l,r({},u)):y.mapContext((function(e){var n=e.messageErrors,o=e.onBlur,i=d(e.messageErrors,u.name);switch(s){case String:return a(S,r(r({},u),{},{messageErrors:n,onBlur:o}));case Number:return a(S,r({slots:{textFieldProps:{type:"number"}},messageErrors:n,onBlur:o},u));case Boolean:return t("div",{children:[t("label",{children:[u.label||c,": "]}),a("input",{name:c,type:"checkbox",defaultChecked:m}),a("span",{style:{color:"red"},children:i.error?i.message:""})]});default:return t("div",{children:["Unsupported field type for ",c]})}}))},j=function(n){var d,b=c(n.configClass),g=m(n.configClass),h=f(n.configClass);if(!p(n.configClass)){var S,j=(null===(S=n.configClass)||void 0===S?void 0:S.name)||"Unknown";return t(i,{sx:{border:"1px dashed #ccc",padding:12,borderRadius:4,color:"#333",background:"#fafafa"},children:[a(s,{variant:"subtitle1",sx:{fontWeight:600,marginBottom:6},children:"Form configuration not registered"}),t(s,{variant:"body1",children:['Configuration for "',j,'" was not found. Did you forget to add ',a("code",{children:"@registerForm"})," to the class?"]})]})}var C,B,E=function(){var r=e(o().m((function r(e){var t,a;return o().w((function(r){for(;;)switch(r.n){case 0:if(t=e,r.p=1,null==h||!h.handler){r.n=3;break}return r.n=2,h.handler(e,n.data);case 2:null==(t=r.v)&&(t=e);case 3:if(!n.onSubmit){r.n=4;break}return r.n=4,n.onSubmit(t);case 4:r.n=6;break;case 5:throw r.p=5,a=r.v,n.onError&&n.onError(a),a;case 6:return r.a(2)}}),r,null,[[1,5]])})));return function(e){return r.apply(this,arguments)}}();return t(y.Form,{onSubmit:E,validate:new v(g),onError:n.onSubmitError,children:[a(l,{container:!0,spacing:2,children:b.map((function(e){return a(l,r(r({item:!0,xs:12},e.size),{},{children:a(x,r({data:n.data},e))}),e.name.toString())}))}),!1===(null===(C=n.slots)||void 0===C?void 0:C.isFooter)?null:null!==(B=n.slots)&&void 0!==B&&B.renderSubmitButton?n.slots.renderSubmitButton():a(u,{variant:"contained",color:"primary",type:"submit",sx:{mt:2},children:"Submit"}),null===(d=n.slots)||void 0===d?void 0:d.bottom]})},C=function(e,n){return function(o){return a(j,r(r({configClass:e},n),o))}};export{x as DecoratorField,j as DecoratorForm,C as createDecoratorForm,j as default};
 //# sourceMappingURL=decorator.form.js.map

package/dist/src/form/decorator.form.js.map

@@ -1 +1 @@
-{"version":3,"file":"decorator.form.js","sources":["../../../src/form/decorator.form.tsx"],"sourcesContent":["import { ComponentType, FC } from 'react'\r\nimport { Button, Grid } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { getFormFields, getFormPreSubmit, getFormValidators } from './decorator'\r\nimport FormValidator from './validator'\r\nimport createInput from './create.input'\r\nimport createFormBase from './create.form-base'\r\n\r\nconst FormBase = createFormBase<any>({})\r\nconst InputInstance = createInput<any>({})\r\n\r\nexport interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {\r\n  type?: any\r\n  renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport const DecoratorField: FC<IDecoratorFieldProps> = ({ type: inputType, renderInput, ...props }) => {\r\n  const name = props.name?.toString() || ''\r\n  const defaultValue = props.data?.[name] || props.defaultValue\r\n  if (renderInput) {\r\n    const InputComp = renderInput\r\n    return <InputComp {...props} />\r\n  }\r\n  return FormBase.mapContext((context) => {\r\n    const { messageErrors, onBlur } = context\r\n    const err = getErrorMessage(context.messageErrors, props.name as any)\r\n    switch (inputType) {\r\n      case String:\r\n        return <InputInstance {...props} messageErrors={messageErrors} onBlur={onBlur} />\r\n      case Number:\r\n        return <InputInstance slots={{ textFieldProps: { type: 'number' } }} messageErrors={messageErrors} onBlur={onBlur} {...props} />\r\n      case Boolean:\r\n        return (\r\n          <div>\r\n            <label>{props.label || name}: </label>\r\n            <input name={name} type='checkbox' defaultChecked={defaultValue} />\r\n            <span style={{ color: 'red' }}>{err.error ? err.message : ''}</span>\r\n          </div>\r\n        )\r\n      default:\r\n        return <div>Unsupported field type for {name}</div>\r\n    }\r\n  })\r\n}\r\n\r\nexport interface IDecoratorFormSlots {\r\n  bottom?: React.ReactNode\r\n  renderSubmitButton?: () => React.ReactNode\r\n}\r\n\r\nexport interface IDecoratorFormProps {\r\n  configClass: any\r\n  data?: any\r\n  onSubmit?: (data: any) => Promise<void>\r\n  slots?: IDecoratorFormSlots\r\n}\r\n\r\nexport const DecoratorForm: FC<IDecoratorFormProps> = (props) => {\r\n  const fields = getFormFields(props.configClass)\r\n  const validators = getFormValidators(props.configClass)\r\n  const preSubmitConfig = getFormPreSubmit(props.configClass)\r\n\r\n  const handleSubmit = async (data: any) => {\r\n    let processedData = data\r\n\r\n    // Execute presubmit handler if exists\r\n    if (preSubmitConfig?.handler) {\r\n      try {\r\n        processedData = await preSubmitConfig.handler(data, props.data)\r\n        // If handler returns null/undefined, use original data\r\n        if (processedData === null || processedData === undefined) {\r\n          processedData = data\r\n        }\r\n      } catch (error) {\r\n        console.error('PreSubmit handler error:', error)\r\n        throw error\r\n      }\r\n    }\r\n\r\n    // Call the original onSubmit with processed data\r\n    if (props.onSubmit) {\r\n      await props.onSubmit(processedData)\r\n    }\r\n  }\r\n\r\n  const renderFooter = () => {\r\n    if (props.slots?.renderSubmitButton) {\r\n      return props.slots.renderSubmitButton()\r\n    }\r\n    return (\r\n      <Button variant='contained' color='primary' type='submit' sx={{ mt: 2 }}>\r\n        Submit\r\n      </Button>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <FormBase.Form onSubmit={handleSubmit} validate={new FormValidator(validators)}>\r\n      <Grid container spacing={2}>\r\n        {fields.map((field) => (\r\n          <Grid item key={field.name.toString()} xs={12} {...field.size}>\r\n            <DecoratorField data={props.data} {...field} />\r\n          </Grid>\r\n        ))}\r\n      </Grid>\r\n      {renderFooter()}\r\n      {props.slots?.bottom}\r\n    </FormBase.Form>\r\n  )\r\n}\r\nexport default DecoratorForm\r\n\r\nexport const createDecoratorForm = function <T>(\r\n  configClass: any,\r\n  params?: Partial<Omit<IDecoratorFormProps, 'configClass'>>\r\n): ComponentType<Omit<IDecoratorFormProps, 'configClass'>> {\r\n  const DecoratorFormComp: FC<Omit<IDecoratorFormProps, 'configClass'>> = (props) => {\r\n    return <DecoratorForm configClass={configClass} {...params} {...props} />\r\n  }\r\n  return DecoratorFormComp\r\n}\r\n"],"names":["FormBase","createFormBase","InputInstance","createInput","DecoratorField","_ref","_props$name","_props$data","inputType","type","renderInput","props","_objectWithoutProperties","_excluded","name","toString","defaultValue","data","_jsx","_objectSpread","mapContext","context","messageErrors","onBlur","err","getErrorMessage","String","Number","slots","textFieldProps","Boolean","_jsxs","children","label","defaultChecked","style","color","error","message","DecoratorForm","_props$slots2","_props$slots","fields","getFormFields","configClass","validators","getFormValidators","preSubmitConfig","getFormPreSubmit","handleSubmit","_ref2","_asyncToGenerator","_regenerator","m","_callee","processedData","_t","w","_context","n","handler","p","v","console","onSubmit","a","_x","apply","this","arguments","Form","validate","FormValidator","Grid","container","spacing","map","field","item","xs","size","renderSubmitButton","Button","variant","sx","mt","bottom","createDecoratorForm","params"],"mappings":"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"}
+{"version":3,"file":"decorator.form.js","sources":["../../../src/form/decorator.form.tsx"],"sourcesContent":["import { ComponentType, FC } from 'react'\r\nimport { Box, Button, Grid, Typography } from '@mui/material'\r\nimport { IFormInputBase } from './types'\r\nimport { getErrorMessage } from './helpers'\r\nimport { getFormFields, getFormPreSubmit, getFormValidators, isFormRegistered } from './decorator'\r\nimport FormValidator, { IPartialError } from './validator'\r\nimport createInput from './create.input'\r\nimport createFormBase from './create.form-base'\r\n\r\nconst FormBase = createFormBase<any>({})\r\nconst InputInstance = createInput<any>({})\r\n\r\nexport interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {\r\n  type?: any\r\n  renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport const DecoratorField: FC<IDecoratorFieldProps> = ({ type: inputType, renderInput, ...props }) => {\r\n  const name = props.name?.toString() || ''\r\n  const defaultValue = props.data?.[name] || props.defaultValue\r\n  if (renderInput) {\r\n    const InputComp = renderInput\r\n    return <InputComp {...props} />\r\n  }\r\n  return FormBase.mapContext((context) => {\r\n    const { messageErrors, onBlur } = context\r\n    const err = getErrorMessage(context.messageErrors, props.name as any)\r\n    switch (inputType) {\r\n      case String:\r\n        return <InputInstance {...props} messageErrors={messageErrors} onBlur={onBlur} />\r\n      case Number:\r\n        return <InputInstance slots={{ textFieldProps: { type: 'number' } }} messageErrors={messageErrors} onBlur={onBlur} {...props} />\r\n      case Boolean:\r\n        return (\r\n          <div>\r\n            <label>{props.label || name}: </label>\r\n            <input name={name} type='checkbox' defaultChecked={defaultValue} />\r\n            <span style={{ color: 'red' }}>{err.error ? err.message : ''}</span>\r\n          </div>\r\n        )\r\n      default:\r\n        return <div>Unsupported field type for {name}</div>\r\n    }\r\n  })\r\n}\r\n\r\nexport interface IDecoratorFormSlots {\r\n  bottom?: React.ReactNode\r\n  isFooter?: React.ReactNode | boolean\r\n  renderSubmitButton?: () => React.ReactNode\r\n}\r\n\r\nexport interface IDecoratorFormProps<T = any> {\r\n  configClass: any\r\n  data?: any\r\n  onSubmit?: (data: any) => Promise<void>\r\n  onError?: (error: any) => void\r\n  onSubmitError?: (error: IPartialError<T>) => void\r\n  slots?: IDecoratorFormSlots\r\n}\r\n\r\nexport const DecoratorForm: FC<IDecoratorFormProps> = (props) => {\r\n  const fields = getFormFields(props.configClass)\r\n  const validators = getFormValidators(props.configClass)\r\n  const preSubmitConfig = getFormPreSubmit(props.configClass)\r\n\r\n  // If the provided configClass isn't registered via @registerForm,\r\n  // show a simple, friendly error UI instead of throwing.\r\n  if (!isFormRegistered(props.configClass)) {\r\n    const name = props.configClass?.name || 'Unknown'\r\n    return (\r\n      <Box sx={{ border: '1px dashed #ccc', padding: 12, borderRadius: 4, color: '#333', background: '#fafafa' }}>\r\n        <Typography variant='subtitle1' sx={{ fontWeight: 600, marginBottom: 6 }}>\r\n          Form configuration not registered\r\n        </Typography>\r\n        <Typography variant='body1'>\r\n          Configuration for \"{name}\" was not found. Did you forget to add <code>@registerForm</code> to the class?\r\n        </Typography>\r\n      </Box>\r\n    )\r\n  }\r\n\r\n  const handleSubmit = async (data: any) => {\r\n    let processedData = data\r\n    try {\r\n      // Execute presubmit handler if exists\r\n      if (preSubmitConfig?.handler) {\r\n        processedData = await preSubmitConfig.handler(data, props.data)\r\n        // If handler returns null/undefined, use original data\r\n        if (processedData === null || processedData === undefined) {\r\n          processedData = data\r\n        }\r\n      }\r\n\r\n      // Call the original onSubmit with processed data\r\n      if (props.onSubmit) {\r\n        await props.onSubmit(processedData)\r\n      }\r\n    } catch (error) {\r\n      if (props.onError) {\r\n        props.onError(error)\r\n      }\r\n      throw error\r\n    }\r\n  }\r\n\r\n  const renderFooter = () => {\r\n    if (props.slots?.isFooter === false) return null\r\n    if (props.slots?.renderSubmitButton) {\r\n      return props.slots.renderSubmitButton()\r\n    }\r\n    return (\r\n      <Button variant='contained' color='primary' type='submit' sx={{ mt: 2 }}>\r\n        Submit\r\n      </Button>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <FormBase.Form onSubmit={handleSubmit} validate={new FormValidator(validators)} onError={props.onSubmitError}>\r\n      <Grid container spacing={2}>\r\n        {fields.map((field) => (\r\n          <Grid item key={field.name.toString()} xs={12} {...field.size}>\r\n            <DecoratorField data={props.data} {...field} />\r\n          </Grid>\r\n        ))}\r\n      </Grid>\r\n      {renderFooter()}\r\n      {props.slots?.bottom}\r\n    </FormBase.Form>\r\n  )\r\n}\r\nexport default DecoratorForm\r\n\r\nexport const createDecoratorForm = function <T>(\r\n  configClass: any,\r\n  params?: Partial<Omit<IDecoratorFormProps, 'configClass'>>\r\n): ComponentType<Omit<IDecoratorFormProps, 'configClass'>> {\r\n  const DecoratorFormComp: FC<Omit<IDecoratorFormProps, 'configClass'>> = (props) => {\r\n    return <DecoratorForm configClass={configClass} {...params} {...props} />\r\n  }\r\n  return DecoratorFormComp\r\n}\r\n"],"names":["FormBase","createFormBase","InputInstance","createInput","DecoratorField","_ref","_props$name","_props$data","inputType","type","renderInput","props","_objectWithoutProperties","_excluded","name","toString","defaultValue","data","_jsx","_objectSpread","mapContext","context","messageErrors","onBlur","err","getErrorMessage","String","Number","slots","textFieldProps","Boolean","_jsxs","children","label","defaultChecked","style","color","error","message","DecoratorForm","_props$slots3","fields","getFormFields","configClass","validators","getFormValidators","preSubmitConfig","getFormPreSubmit","isFormRegistered","_props$configClass","Box","sx","border","padding","borderRadius","background","Typography","variant","fontWeight","marginBottom","_props$slots","_props$slots2","handleSubmit","_ref2","_asyncToGenerator","_regenerator","m","_callee","processedData","_t","w","_context","n","p","handler","v","onSubmit","onError","a","_x","apply","this","arguments","Form","validate","FormValidator","onSubmitError","Grid","container","spacing","map","field","item","xs","size","isFooter","renderSubmitButton","Button","mt","bottom","createDecoratorForm","params"],"mappings":"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"}

package/dist/src/form/decorator.js

@@ -1,2 +1,2 @@
-import{toConsumableArray as e,objectSpread2 as t,inherits as a,createClass as r,classCallCheck as n,callSuper as l,defineProperty as o}from"../../_virtual/_rollupPluginBabelHelpers.js";import"../../_virtual/Reflect.js";var c=new Map;function u(e){return function(t){var u=e||t.name;c.set(u,t);var f=function(e){function t(){var e;n(this,t);for(var a=arguments.length,r=new Array(a),c=0;c<a;c++)r[c]=arguments[c];return e=l(this,t,[].concat(r)),o(e,"__class",u),e.__class=u,e}return a(t,e),r(t)}(t);return Object.defineProperty(f,"name",{value:t.name}),Object.defineProperty(f,"__class",{value:u}),f}}function f(e){return function(t){return Reflect.defineMetadata("form:presubmit",{handler:e},t),t}}function s(e){return Reflect.getMetadata("form:presubmit",e)}function i(a){return function(r,n){var l=Reflect.getMetadata("design:type",r,n),o=a.type||l,c=Reflect.getMetadata("form:fields",r.constructor)||[],u=e(c);u.push(t({name:n,type:o,label:a.label||n},a)),Reflect.defineMetadata("form:fields",u,r.constructor)}}var d=function(e){return Reflect.getMetadata("form:fields",e)||[]};function m(a){return function(r,n){var l=Reflect.getMetadata("form:validators",r.constructor)||[],o=e(l);o.push(t({name:n},a)),Reflect.defineMetadata("form:validators",o,r.constructor)}}function p(e){return(Reflect.getMetadata("form:validators",e)||[]).reduce((function(e,t){return e[t.name]={Rules:t.Rules,label:t.label},e}),{})}export{i as formField,f as formPreSubmit,m as formValidate,d as getFormFields,s as getFormPreSubmit,p as getFormValidators,u as registerForm};
+import{toConsumableArray as e,objectSpread2 as t,inherits as r,createClass as a,classCallCheck as n,callSuper as o,defineProperty as u}from"../../_virtual/_rollupPluginBabelHelpers.js";import"../../_virtual/Reflect.js";var c=new Map;function l(e){return function(t){var l=e||t.name;c.set(l,t);var f=function(e){function t(){var e;n(this,t);for(var r=arguments.length,a=new Array(r),c=0;c<r;c++)a[c]=arguments[c];return e=o(this,t,[].concat(a)),u(e,"__class",l),e.__class=l,e}return r(t,e),a(t)}(t);return Object.defineProperty(f,"name",{value:t.name}),Object.defineProperty(f,"__class",{value:l}),f}}function f(e){if(!e)return!1;var t="function"==typeof e?e:null==e?void 0:e.constructor;if(!t)return!1;var r=t.__class||t.name;return!!r&&c.has(r)}function s(e){return function(t){return Reflect.defineMetadata("form:presubmit",{handler:e},t),t}}function i(e){return Reflect.getMetadata("form:presubmit",e)}function d(r){return function(a,n){var o=Reflect.getMetadata("design:type",a,n),u=r.type||o,c=Reflect.getMetadata("form:fields",a.constructor)||[],l=e(c);l.push(t({name:n,type:u,label:r.label||n},r)),Reflect.defineMetadata("form:fields",l,a.constructor)}}var m=function(e){return Reflect.getMetadata("form:fields",e)||[]};function p(r){return function(a,n){var o=Reflect.getMetadata("form:validators",a.constructor)||[],u=e(o);u.push(t({name:n},r)),Reflect.defineMetadata("form:validators",u,a.constructor)}}function v(e){return(Reflect.getMetadata("form:validators",e)||[]).reduce((function(e,t){return e[t.name]={Rules:t.Rules,label:t.label},e}),{})}export{d as formField,s as formPreSubmit,p as formValidate,m as getFormFields,i as getFormPreSubmit,v as getFormValidators,f as isFormRegistered,l as registerForm};
 //# sourceMappingURL=decorator.js.map

package/dist/src/form/decorator.js.map

@@ -1 +1 @@
-{"version":3,"file":"decorator.js","sources":["../../../src/form/decorator.ts"],"sourcesContent":["import 'reflect-metadata'\r\nimport { ComponentType } from 'react'\r\nimport { IFormInputBase } from './types'\r\nimport { IConfigValue, IFormValidatorConfig } from './validator'\r\n\r\nconst ClassRegistry = new Map<string, any>()\r\n\r\nexport function registerForm(name?: string) {\r\n  return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n    const key = name || constructor.name\r\n    ClassRegistry.set(key, constructor)\r\n    class RegisteredClass extends constructor {\r\n      __class = key\r\n      constructor(...args: any[]) {\r\n        super(...args)\r\n        this.__class = key\r\n      }\r\n    }\r\n    Object.defineProperty(RegisteredClass, 'name', { value: constructor.name })\r\n    Object.defineProperty(RegisteredClass, '__class', { value: key })\r\n    return RegisteredClass\r\n  }\r\n}\r\n\r\nexport interface IPreSubmitMetadata<T = any> {\r\n  handler: (data: T, oldData: T) => Promise<any> | any\r\n}\r\n\r\nexport function formPreSubmit<T = any>(handler: IPreSubmitMetadata<T>['handler']) {\r\n  return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n    Reflect.defineMetadata('form:presubmit', { handler }, constructor)\r\n    return constructor\r\n  }\r\n}\r\n\r\nexport function getFormPreSubmit(targetClass: any): IPreSubmitMetadata | undefined {\r\n  return Reflect.getMetadata('form:presubmit', targetClass)\r\n}\r\n\r\nexport interface IFieldMetadata<T = any> {\r\n  name: keyof T | string\r\n  label?: string\r\n  placeholder?: string\r\n  default?: any\r\n  type?: any\r\n  size?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>\r\n  renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport function formField(options: Omit<IFieldMetadata, 'name'>) {\r\n  return function (target: any, propertyKey: string) {\r\n    const designType = Reflect.getMetadata('design:type', target, propertyKey)\r\n    const actualType = options.type || designType\r\n    const existing: IFieldMetadata[] = Reflect.getMetadata('form:fields', target.constructor) || []\r\n    const fields = [...existing]\r\n    fields.push({ name: propertyKey, type: actualType, label: options.label || propertyKey, ...options })\r\n    Reflect.defineMetadata('form:fields', fields, target.constructor)\r\n  }\r\n}\r\n\r\nexport const getFormFields = (targetClass: any): IFieldMetadata[] => {\r\n  return Reflect.getMetadata('form:fields', targetClass) || []\r\n}\r\n\r\nexport interface IValidationMetadata extends IConfigValue {\r\n  name: string\r\n}\r\n\r\nexport function formValidate(options: Omit<IValidationMetadata, 'name'>) {\r\n  return function (target: any, propertyKey: string) {\r\n    const existing: IValidationMetadata[] = Reflect.getMetadata('form:validators', target.constructor) || []\r\n    const validators = [...existing]\r\n    validators.push({ name: propertyKey, ...options })\r\n    Reflect.defineMetadata('form:validators', validators, target.constructor)\r\n  }\r\n}\r\n\r\nexport function getFormValidators<T = any>(targetClass: any): IFormValidatorConfig<T> {\r\n  const metas: IValidationMetadata[] = Reflect.getMetadata('form:validators', targetClass) || []\r\n  return metas.reduce<IFormValidatorConfig<T>>((acc, curr) => {\r\n    acc[curr.name as keyof T] = { Rules: curr.Rules, label: curr.label }\r\n    return acc\r\n  }, {})\r\n}\r\n"],"names":["ClassRegistry","Map","registerForm","name","constructor","key","set","RegisteredClass","_constructor","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","__class","_inherits","_createClass","Object","defineProperty","value","formPreSubmit","handler","Reflect","defineMetadata","getFormPreSubmit","targetClass","getMetadata","formField","options","target","propertyKey","designType","actualType","type","existing","fields","_toConsumableArray","push","_objectSpread","label","getFormFields","formValidate","validators","getFormValidators","reduce","acc","curr","Rules"],"mappings":"2NAKA,IAAMA,EAAgB,IAAIC,IAEpB,SAAUC,EAAaC,GAC3B,OAAO,SAAkDC,GACvD,IAAMC,EAAMF,GAAQC,EAAYD,KAChCH,EAAcM,IAAID,EAAKD,GAAY,IAC7BG,WAAgBC,GAEpB,SAAAD,IAA0B,IAAAE,EAAAC,OAAAH,GAAA,IAAA,IAAAI,EAAAC,UAAAC,OAAXC,EAAWC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAXF,EAAWE,GAAAJ,UAAAI,GAEN,OADlBP,EAAAQ,EAAAC,KAAAX,EAAAY,GAAAA,OAASL,IAAKM,EAAAX,EAAA,UAFNJ,GAGRI,EAAKY,QAAUhB,EAAGI,CACpB,CAAC,OAAAa,EAAAf,EAAAC,GAAAe,EAAAhB,EAAA,EAL2BH,GAS9B,OAFAoB,OAAOC,eAAelB,EAAiB,OAAQ,CAAEmB,MAAOtB,EAAYD,OACpEqB,OAAOC,eAAelB,EAAiB,UAAW,CAAEmB,MAAOrB,IACpDE,CACR,CACH,CAMM,SAAUoB,EAAuBC,GACrC,OAAO,SAAkDxB,GAEvD,OADAyB,QAAQC,eAAe,iBAAkB,CAAEF,QAAAA,GAAWxB,GAC/CA,CACR,CACH,CAEM,SAAU2B,EAAiBC,GAC/B,OAAOH,QAAQI,YAAY,iBAAkBD,EAC/C,CAYM,SAAUE,EAAUC,GACxB,OAAO,SAAUC,EAAaC,GAC5B,IAAMC,EAAaT,QAAQI,YAAY,cAAeG,EAAQC,GACxDE,EAAaJ,EAAQK,MAAQF,EAC7BG,EAA6BZ,QAAQI,YAAY,cAAeG,EAAOhC,cAAgB,GACvFsC,EAAMC,EAAOF,GACnBC,EAAOE,KAAIC,EAAA,CAAG1C,KAAMkC,EAAaG,KAAMD,EAAYO,MAAOX,EAAQW,OAAST,GAAgBF,IAC3FN,QAAQC,eAAe,cAAeY,EAAQN,EAAOhC,YACtD,CACH,KAEa2C,EAAgB,SAACf,GAC5B,OAAOH,QAAQI,YAAY,cAAeD,IAAgB,EAC5D,EAMM,SAAUgB,EAAab,GAC3B,OAAO,SAAUC,EAAaC,GAC5B,IAAMI,EAAkCZ,QAAQI,YAAY,kBAAmBG,EAAOhC,cAAgB,GAChG6C,EAAUN,EAAOF,GACvBQ,EAAWL,KAAIC,EAAA,CAAG1C,KAAMkC,GAAgBF,IACxCN,QAAQC,eAAe,kBAAmBmB,EAAYb,EAAOhC,YAC9D,CACH,CAEM,SAAU8C,EAA2BlB,GAEzC,OADqCH,QAAQI,YAAY,kBAAmBD,IAAgB,IAC/EmB,QAAgC,SAACC,EAAKC,GAEjD,OADAD,EAAIC,EAAKlD,MAAmB,CAAEmD,MAAOD,EAAKC,MAAOR,MAAOO,EAAKP,OACtDM,CACR,GAAE,GACL"}
+{"version":3,"file":"decorator.js","sources":["../../../src/form/decorator.ts"],"sourcesContent":["import 'reflect-metadata'\r\nimport { ComponentType } from 'react'\r\nimport { IFormInputBase } from './types'\r\nimport { IConfigValue, IFormValidatorConfig } from './validator'\r\n\r\nconst ClassRegistry = new Map<string, any>()\r\n\r\nexport function registerForm(name?: string) {\r\n  return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n    const key = name || constructor.name\r\n    ClassRegistry.set(key, constructor)\r\n    class RegisteredClass extends constructor {\r\n      __class = key\r\n      constructor(...args: any[]) {\r\n        super(...args)\r\n        this.__class = key\r\n      }\r\n    }\r\n    Object.defineProperty(RegisteredClass, 'name', { value: constructor.name })\r\n    Object.defineProperty(RegisteredClass, '__class', { value: key })\r\n    return RegisteredClass\r\n  }\r\n}\r\n\r\n/**\r\n * Check whether a class (constructor) or an instance has been registered\r\n * with the @registerForm decorator.\r\n *\r\n * Accepts:\r\n * - the decorated constructor (function)\r\n * - the original constructor (function)\r\n * - an instance of the class\r\n *\r\n * Returns true when the underlying registry contains an entry for the\r\n * class key (either the custom name provided to the decorator or the\r\n * constructor name).\r\n */\r\nexport function isFormRegistered(target: any): boolean {\r\n  if (!target) return false\r\n  const ctor = typeof target === 'function' ? target : target?.constructor\r\n  if (!ctor) return false\r\n  const key = (ctor as any).__class || (ctor as any).name\r\n  if (!key) return false\r\n  return ClassRegistry.has(key)\r\n}\r\n\r\nexport interface IPreSubmitMetadata<T = any> {\r\n  handler: (data: T, oldData: T) => Promise<any> | any\r\n}\r\n\r\nexport function formPreSubmit<T = any>(handler: IPreSubmitMetadata<T>['handler']) {\r\n  return function <T extends { new (...args: any[]): {} }>(constructor: T) {\r\n    Reflect.defineMetadata('form:presubmit', { handler }, constructor)\r\n    return constructor\r\n  }\r\n}\r\n\r\nexport function getFormPreSubmit(targetClass: any): IPreSubmitMetadata | undefined {\r\n  return Reflect.getMetadata('form:presubmit', targetClass)\r\n}\r\n\r\nexport interface IFieldMetadata<T = any> {\r\n  name: keyof T | string\r\n  label?: string\r\n  placeholder?: string\r\n  default?: any\r\n  type?: any\r\n  size?: Partial<Record<'xs' | 'sm' | 'md' | 'lg' | 'xl', number>>\r\n  renderInput?: ComponentType<IFormInputBase<T>>\r\n}\r\n\r\nexport function formField(options: Omit<IFieldMetadata, 'name'>) {\r\n  return function (target: any, propertyKey: string) {\r\n    const designType = Reflect.getMetadata('design:type', target, propertyKey)\r\n    const actualType = options.type || designType\r\n    const existing: IFieldMetadata[] = Reflect.getMetadata('form:fields', target.constructor) || []\r\n    const fields = [...existing]\r\n    fields.push({ name: propertyKey, type: actualType, label: options.label || propertyKey, ...options })\r\n    Reflect.defineMetadata('form:fields', fields, target.constructor)\r\n  }\r\n}\r\n\r\nexport const getFormFields = (targetClass: any): IFieldMetadata[] => {\r\n  return Reflect.getMetadata('form:fields', targetClass) || []\r\n}\r\n\r\nexport interface IValidationMetadata extends IConfigValue {\r\n  name: string\r\n}\r\n\r\nexport function formValidate(options: Omit<IValidationMetadata, 'name'>) {\r\n  return function (target: any, propertyKey: string) {\r\n    const existing: IValidationMetadata[] = Reflect.getMetadata('form:validators', target.constructor) || []\r\n    const validators = [...existing]\r\n    validators.push({ name: propertyKey, ...options })\r\n    Reflect.defineMetadata('form:validators', validators, target.constructor)\r\n  }\r\n}\r\n\r\nexport function getFormValidators<T = any>(targetClass: any): IFormValidatorConfig<T> {\r\n  const metas: IValidationMetadata[] = Reflect.getMetadata('form:validators', targetClass) || []\r\n  return metas.reduce<IFormValidatorConfig<T>>((acc, curr) => {\r\n    acc[curr.name as keyof T] = { Rules: curr.Rules, label: curr.label }\r\n    return acc\r\n  }, {})\r\n}\r\n"],"names":["ClassRegistry","Map","registerForm","name","constructor","key","set","RegisteredClass","_constructor","_this","_classCallCheck","_len","arguments","length","args","Array","_key","_callSuper","this","concat","_defineProperty","__class","_inherits","_createClass","Object","defineProperty","value","isFormRegistered","target","ctor","has","formPreSubmit","handler","Reflect","defineMetadata","getFormPreSubmit","targetClass","getMetadata","formField","options","propertyKey","designType","actualType","type","existing","fields","_toConsumableArray","push","_objectSpread","label","getFormFields","formValidate","validators","getFormValidators","reduce","acc","curr","Rules"],"mappings":"2NAKA,IAAMA,EAAgB,IAAIC,IAEpB,SAAUC,EAAaC,GAC3B,OAAO,SAAkDC,GACvD,IAAMC,EAAMF,GAAQC,EAAYD,KAChCH,EAAcM,IAAID,EAAKD,GAAY,IAC7BG,WAAgBC,GAEpB,SAAAD,IAA0B,IAAAE,EAAAC,OAAAH,GAAA,IAAA,IAAAI,EAAAC,UAAAC,OAAXC,EAAWC,IAAAA,MAAAJ,GAAAK,EAAA,EAAAA,EAAAL,EAAAK,IAAXF,EAAWE,GAAAJ,UAAAI,GAEN,OADlBP,EAAAQ,EAAAC,KAAAX,EAAAY,GAAAA,OAASL,IAAKM,EAAAX,EAAA,UAFNJ,GAGRI,EAAKY,QAAUhB,EAAGI,CACpB,CAAC,OAAAa,EAAAf,EAAAC,GAAAe,EAAAhB,EAAA,EAL2BH,GAS9B,OAFAoB,OAAOC,eAAelB,EAAiB,OAAQ,CAAEmB,MAAOtB,EAAYD,OACpEqB,OAAOC,eAAelB,EAAiB,UAAW,CAAEmB,MAAOrB,IACpDE,CACR,CACH,CAeM,SAAUoB,EAAiBC,GAC/B,IAAKA,EAAQ,OAAO,EACpB,IAAMC,EAAyB,mBAAXD,EAAwBA,EAASA,aAAAA,EAAAA,EAAQxB,YAC7D,IAAKyB,EAAM,OAAO,EAClB,IAAMxB,EAAOwB,EAAaR,SAAYQ,EAAa1B,KACnD,QAAKE,GACEL,EAAc8B,IAAIzB,EAC3B,CAMM,SAAU0B,EAAuBC,GACrC,OAAO,SAAkD5B,GAEvD,OADA6B,QAAQC,eAAe,iBAAkB,CAAEF,QAAAA,GAAW5B,GAC/CA,CACR,CACH,CAEM,SAAU+B,EAAiBC,GAC/B,OAAOH,QAAQI,YAAY,iBAAkBD,EAC/C,CAYM,SAAUE,EAAUC,GACxB,OAAO,SAAUX,EAAaY,GAC5B,IAAMC,EAAaR,QAAQI,YAAY,cAAeT,EAAQY,GACxDE,EAAaH,EAAQI,MAAQF,EAC7BG,EAA6BX,QAAQI,YAAY,cAAeT,EAAOxB,cAAgB,GACvFyC,EAAMC,EAAOF,GACnBC,EAAOE,KAAIC,EAAA,CAAG7C,KAAMqC,EAAaG,KAAMD,EAAYO,MAAOV,EAAQU,OAAST,GAAgBD,IAC3FN,QAAQC,eAAe,cAAeW,EAAQjB,EAAOxB,YACtD,CACH,KAEa8C,EAAgB,SAACd,GAC5B,OAAOH,QAAQI,YAAY,cAAeD,IAAgB,EAC5D,EAMM,SAAUe,EAAaZ,GAC3B,OAAO,SAAUX,EAAaY,GAC5B,IAAMI,EAAkCX,QAAQI,YAAY,kBAAmBT,EAAOxB,cAAgB,GAChGgD,EAAUN,EAAOF,GACvBQ,EAAWL,KAAIC,EAAA,CAAG7C,KAAMqC,GAAgBD,IACxCN,QAAQC,eAAe,kBAAmBkB,EAAYxB,EAAOxB,YAC9D,CACH,CAEM,SAAUiD,EAA2BjB,GAEzC,OADqCH,QAAQI,YAAY,kBAAmBD,IAAgB,IAC/EkB,QAAgC,SAACC,EAAKC,GAEjD,OADAD,EAAIC,EAAKrD,MAAmB,CAAEsD,MAAOD,EAAKC,MAAOR,MAAOO,EAAKP,OACtDM,CACR,GAAE,GACL"}

package/dist/types/data-view/animation-switch.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { EViewMode } from './view-mode.types';
+interface IProps {
+    mode: EViewMode;
+    moduleNode: ReactNode;
+    listNode: ReactNode;
+    autoHeight?: boolean;
+}
+declare const AnimationSwitch: FC<IProps>;
+export default AnimationSwitch;
+export declare const animationSwitchClasses: {
+    root: string;
+    content: string;
+    autoHeight: string;
+    pane: string;
+    paneList: string;
+    paneModule: string;
+    visible: string;
+    hidden: string;
+};
+export declare const AnimationSwitchStyled: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/types/data-view/create.data-view.d.ts

@@ -40,9 +40,11 @@ export interface IDataViewProps<T extends IViewModeValidModel> {
     viewMode?: EViewMode;
     onViewModeChange?: (value: EViewMode) => void;
     syncViewModeToURL?: boolean;
+    autoHeight?: boolean;
     slots?: IDataViewSlots<T>;
 }
 export interface IDataViewConfigs<T extends IViewModeValidModel> {
+    autoHeight?: boolean;
     filterBar?: IFilterBarConfigs<T>;
     viewMode?: IViewModeConfigs<T>;
     paginationBar?: IPaginationBarConfigs;

package/dist/types/data-view/create.view-mode.d.ts

@@ -10,6 +10,7 @@ interface IViewModeProps<T extends IViewModeValidModel> {
     data: T[];
     viewMode?: EViewMode;
     ready?: boolean;
+    autoHeight?: boolean;
     loading?: boolean;
     error?: string;
     slots?: IViewModeSlots<T>;

package/dist/types/data-view/view-mode.content.d.ts

@@ -4,11 +4,13 @@ import { IViewModeListConfig, IViewModeModuleConfig, IViewModeValidModel } from
 export interface IViewModeModuleProps<T extends IViewModeValidModel> {
     data: T[];
     configs: IViewModeModuleConfig<T>;
+    autoHeight?: boolean;
 }
 export declare function createViewModeModule<T extends IViewModeValidModel>(): ComponentType<IViewModeModuleProps<T>>;
 export interface IViewModeListProps<T extends IViewModeValidModel> {
     value: T[];
     configs: IViewModeListConfig<T>;
+    autoHeight?: boolean;
     slots?: {
         dataGridProps?: Partial<Omit<DataGridProps, 'columns' | 'rows'>>;
     };

package/dist/types/form/decorator.d.ts

@@ -7,6 +7,20 @@ export declare function registerForm(name?: string): <T extends new (...args: an
         __class: string;
     };
 } & T;
+/**
+ * Check whether a class (constructor) or an instance has been registered
+ * with the @registerForm decorator.
+ *
+ * Accepts:
+ * - the decorated constructor (function)
+ * - the original constructor (function)
+ * - an instance of the class
+ *
+ * Returns true when the underlying registry contains an entry for the
+ * class key (either the custom name provided to the decorator or the
+ * constructor name).
+ */
+export declare function isFormRegistered(target: any): boolean;
 export interface IPreSubmitMetadata<T = any> {
     handler: (data: T, oldData: T) => Promise<any> | any;
 }

package/dist/types/form/decorator.form.d.ts

@@ -1,5 +1,6 @@
 import { ComponentType, FC } from 'react';
 import { IFormInputBase } from './types';
+import { IPartialError } from './validator';
 export interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {
     type?: any;
     renderInput?: ComponentType<IFormInputBase<T>>;
@@ -7,12 +8,15 @@ export interface IDecoratorFieldProps<T = any> extends IFormInputBase<T> {
 export declare const DecoratorField: FC<IDecoratorFieldProps>;
 export interface IDecoratorFormSlots {
     bottom?: React.ReactNode;
+    isFooter?: React.ReactNode | boolean;
     renderSubmitButton?: () => React.ReactNode;
 }
-export interface IDecoratorFormProps {
+export interface IDecoratorFormProps<T = any> {
     configClass: any;
     data?: any;
     onSubmit?: (data: any) => Promise<void>;
+    onError?: (error: any) => void;
+    onSubmitError?: (error: IPartialError<T>) => void;
     slots?: IDecoratorFormSlots;
 }
 export declare const DecoratorForm: FC<IDecoratorFormProps>;

package/dist/types/form/dino-form.d.ts

@@ -18,8 +18,8 @@ declare class DinoFormBase {
     createFormBase: <T>(params?: import("./create.form-base").IFormBaseParams<T> | undefined) => import("./create.form-base").IFormBaseResult<T>;
     createFormComfirm: <T = any>(param?: import("./create.form-comfirm").IFormComfirmParam<T> | undefined) => import("react").ComponentType<import("react").PropsWithChildren<import("./create.form-comfirm").IFormComfirmProps<T>>>;
     createFormGridLayout: <T>(params: import("./create.form-grid-layout").IFormGridLayoutParams<T>) => import("react").ComponentType<import("./create.form-grid-layout").IFormGridLayoutProps<T>>;
-    DecoratorForm: import("react").FC<import("./decorator.form").IDecoratorFormProps>;
-    createDecoratorForm: <T>(configClass: any, params?: Partial<Omit<import("./decorator.form").IDecoratorFormProps, "configClass">> | undefined) => import("react").ComponentType<Omit<import("./decorator.form").IDecoratorFormProps, "configClass">>;
+    DecoratorForm: import("react").FC<import("./decorator.form").IDecoratorFormProps<any>>;
+    createDecoratorForm: <T>(configClass: any, params?: Partial<Omit<import("./decorator.form").IDecoratorFormProps<any>, "configClass">> | undefined) => import("react").ComponentType<Omit<import("./decorator.form").IDecoratorFormProps<any>, "configClass">>;
     createColorPicker: typeof createColorPicker;
     createDateExpired: typeof CreateDateExpired;
     createDatePicker: <T extends Object>(params?: import("./create.date-picker").IDatePickerSlots | undefined) => import("react").ComponentType<import("./create.date-picker").IDatePickerProps<T>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dinocollab-core",
-  "version": "2.1.22",
+  "version": "2.1.24",
   "description": "Dinocollab core - libraries for building collaborative applications with React 18",
   "main": "dist/index.js",
   "module": "dist/index.js",