@zidsa/zidmui 2.1.2 → 2.1.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1 +1 @@
1
- {"version":3,"file":"app-dialog-with-features.js","sources":["../../../../src/components/app-dialog-with-features.tsx"],"sourcesContent":["import { Box, StackProps, CircularProgress, styled } from '@mui/material';\n\nimport { AppDialog, AppDialogProps } from './app-dialog';\nimport { AppInputSearchProps, AppInputBaseSearch } from './app-input-base-search';\nimport { AppPagination, AppPaginationProps } from './app-pagination';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppDialogWithFeaturesProps = AppDialogProps & {\n open: boolean;\n onClose: () => void;\n search: string;\n onSearchChange?: (search: string) => void;\n searchProps?: AppInputSearchProps;\n pagination?: AppPaginationProps;\n isLoading?: boolean;\n contentProps?: StackProps;\n children?: React.ReactNode;\n};\n\nexport const AppDialogWithFeatures: React.FC<AppDialogWithFeaturesProps> = ({\n open,\n onClose,\n search,\n onSearchChange,\n title,\n searchProps,\n pagination,\n children,\n isLoading,\n contentProps,\n ...props\n}) => {\n return (\n <AppDialog\n open={open}\n onClose={onClose}\n title={title}\n fullWidth\n dialogContentProps={{ sx: { overflow: 'hidden' } }}\n {...props}\n >\n <Content>\n {isLoading && (\n <StackRow width=\"100%\" height={160} alignItems=\"center\" justifyContent=\"center\">\n <CircularProgress />\n </StackRow>\n )}\n\n {!isLoading && (\n <>\n {/* Search */}\n {(search || onSearchChange) && (\n <SearchInput\n fullWidth\n value={search}\n onChange={e => onSearchChange?.(e.target.value)}\n name=\"search\"\n size=\"small\"\n {...searchProps}\n />\n )}\n\n {/* Main content */}\n <StackColumn gap={2} maxHeight=\"500px\" overflow=\"auto\" {...contentProps}>\n {children}\n </StackColumn>\n\n {/* Pagination */}\n {pagination && (\n <StackRow alignItems=\"center\" justifyContent=\"center\">\n <AppPagination\n size=\"medium\"\n count={pagination.count}\n page={pagination.page}\n onChange={pagination.onChange}\n />\n </StackRow>\n )}\n </>\n )}\n </Content>\n </AppDialog>\n );\n};\n\n//\n\nconst SearchInput = styled(AppInputBaseSearch)(({ theme }) => ({\n marginTop: 0,\n '.MuiInputBase-root': {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n fieldset: {\n borderRadius: theme.spacing(40),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n\n input: { paddingLeft: theme.spacing(1) },\n },\n '.MuiInputAdornment-root': {\n marginLeft: theme.spacing(0),\n marginRight: theme.spacing(0),\n pointerEvents: 'none',\n },\n}));\n\nconst Content = styled(Box)(({ theme }) => ({\n display: 'grid',\n gridTemplateRows: 'auto 1fr auto',\n gap: theme.spacing(2),\n}));\n"],"names":["jsx","AppDialog","StackRow","CircularProgress","jsxs","Fragment","StackColumn","AppPagination","styled","AppInputBaseSearch","Box"],"mappings":";;;;;;;;;AAuBO,MAAM,wBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT,oBAAoB,EAAE,IAAI,EAAE,UAAU,WAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,0CAAC,SAAA,EACE,UAAA;AAAA,QAAA,aACCD,2BAAAA,IAACE,mBAAA,EAAS,OAAM,QAAO,QAAQ,KAAK,YAAW,UAAS,gBAAe,UACrE,UAAAF,2BAAAA,IAACG,SAAAA,kBAAA,CAAA,CAAiB,GACpB;AAAA,QAGD,CAAC,aACAC,2BAAAA,KAAAC,WAAAA,UAAA,EAEI,UAAA;AAAA,WAAA,UAAU,mBACVL,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAO;AAAA,cACP,UAAU,CAAA,MAAK,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAC9C,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAKRA,2BAAAA,IAACM,YAAAA,aAAA,EAAY,KAAK,GAAG,WAAU,SAAQ,UAAS,QAAQ,GAAG,cACxD,SAAA,CACH;AAAA,UAGC,cACCN,2BAAAA,IAACE,SAAAA,UAAA,EAAS,YAAW,UAAS,gBAAe,UAC3C,UAAAF,2BAAAA;AAAAA,YAACO,cAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,WAAW;AAAA,cAClB,MAAM,WAAW;AAAA,cACjB,UAAU,WAAW;AAAA,YAAA;AAAA,UAAA,EACvB,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAIA,MAAM,cAAcC,SAAAA,OAAOC,mBAAAA,kBAAkB,EAAE,CAAC,EAAE,aAAa;AAAA,EAC7D,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,UAAU;AAAA,MACR,cAAc,MAAM,QAAQ,EAAE;AAAA,MAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,MAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,IAG/B,OAAO,EAAE,aAAa,MAAM,QAAQ,CAAC,EAAA;AAAA,EAAE;AAAA,EAEzC,2BAA2B;AAAA,IACzB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,eAAe;AAAA,EAAA;AAEnB,EAAE;AAEF,MAAM,UAAUD,SAAAA,OAAOE,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC1C,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;;"}
1
+ {"version":3,"file":"app-dialog-with-features.js","sources":["../../../../src/components/app-dialog-with-features.tsx"],"sourcesContent":["import { Box, StackProps, CircularProgress, styled } from '@mui/material';\n\nimport { AppDialog, AppDialogProps } from './app-dialog';\nimport { AppInputSearchProps, AppInputBaseSearch } from './app-input-base-search';\nimport { AppPagination, AppPaginationProps } from './app-pagination';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppDialogWithFeaturesProps = AppDialogProps & {\n open: boolean;\n onClose: () => void;\n search?: string;\n onSearchChange?: (search: string) => void;\n searchProps?: AppInputSearchProps;\n pagination?: AppPaginationProps;\n isLoading?: boolean;\n contentProps?: StackProps;\n children?: React.ReactNode;\n};\n\nexport const AppDialogWithFeatures: React.FC<AppDialogWithFeaturesProps> = ({\n open,\n onClose,\n search,\n onSearchChange,\n title,\n searchProps,\n pagination,\n children,\n isLoading,\n contentProps,\n ...props\n}) => {\n return (\n <AppDialog\n open={open}\n onClose={onClose}\n title={title}\n fullWidth\n dialogContentProps={{ sx: { overflow: 'hidden' } }}\n {...props}\n >\n <Content>\n {isLoading && (\n <StackRow width=\"100%\" height={160} alignItems=\"center\" justifyContent=\"center\">\n <CircularProgress />\n </StackRow>\n )}\n\n {!isLoading && (\n <>\n {/* Search */}\n {(search || onSearchChange) && (\n <SearchInput\n fullWidth\n value={search}\n onChange={e => onSearchChange?.(e.target.value)}\n name=\"search\"\n size=\"small\"\n {...searchProps}\n />\n )}\n\n {/* Main content */}\n <StackColumn gap={2} maxHeight=\"500px\" overflow=\"auto\" {...contentProps}>\n {children}\n </StackColumn>\n\n {/* Pagination */}\n {pagination && (\n <StackRow alignItems=\"center\" justifyContent=\"center\">\n <AppPagination\n size=\"medium\"\n count={pagination.count}\n page={pagination.page}\n onChange={pagination.onChange}\n />\n </StackRow>\n )}\n </>\n )}\n </Content>\n </AppDialog>\n );\n};\n\n//\n\nconst SearchInput = styled(AppInputBaseSearch)(({ theme }) => ({\n marginTop: 0,\n '.MuiInputBase-root': {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n fieldset: {\n borderRadius: theme.spacing(40),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n\n input: { paddingLeft: theme.spacing(1) },\n },\n '.MuiInputAdornment-root': {\n marginLeft: theme.spacing(0),\n marginRight: theme.spacing(0),\n pointerEvents: 'none',\n },\n}));\n\nconst Content = styled(Box)(({ theme }) => ({\n display: 'grid',\n gridTemplateRows: 'auto 1fr auto',\n gap: theme.spacing(2),\n}));\n"],"names":["jsx","AppDialog","StackRow","CircularProgress","jsxs","Fragment","StackColumn","AppPagination","styled","AppInputBaseSearch","Box"],"mappings":";;;;;;;;;AAuBO,MAAM,wBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACEA,2BAAAA;AAAAA,IAACC,UAAAA;AAAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT,oBAAoB,EAAE,IAAI,EAAE,UAAU,WAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,0CAAC,SAAA,EACE,UAAA;AAAA,QAAA,aACCD,2BAAAA,IAACE,mBAAA,EAAS,OAAM,QAAO,QAAQ,KAAK,YAAW,UAAS,gBAAe,UACrE,UAAAF,2BAAAA,IAACG,SAAAA,kBAAA,CAAA,CAAiB,GACpB;AAAA,QAGD,CAAC,aACAC,2BAAAA,KAAAC,WAAAA,UAAA,EAEI,UAAA;AAAA,WAAA,UAAU,mBACVL,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAO;AAAA,cACP,UAAU,CAAA,MAAK,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAC9C,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAKRA,2BAAAA,IAACM,YAAAA,aAAA,EAAY,KAAK,GAAG,WAAU,SAAQ,UAAS,QAAQ,GAAG,cACxD,SAAA,CACH;AAAA,UAGC,cACCN,2BAAAA,IAACE,SAAAA,UAAA,EAAS,YAAW,UAAS,gBAAe,UAC3C,UAAAF,2BAAAA;AAAAA,YAACO,cAAAA;AAAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,WAAW;AAAA,cAClB,MAAM,WAAW;AAAA,cACjB,UAAU,WAAW;AAAA,YAAA;AAAA,UAAA,EACvB,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAIA,MAAM,cAAcC,SAAAA,OAAOC,mBAAAA,kBAAkB,EAAE,CAAC,EAAE,aAAa;AAAA,EAC7D,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,UAAU;AAAA,MACR,cAAc,MAAM,QAAQ,EAAE;AAAA,MAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,MAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,IAG/B,OAAO,EAAE,aAAa,MAAM,QAAQ,CAAC,EAAA;AAAA,EAAE;AAAA,EAEzC,2BAA2B;AAAA,IACzB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,eAAe;AAAA,EAAA;AAEnB,EAAE;AAEF,MAAM,UAAUD,SAAAA,OAAOE,SAAAA,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC1C,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"app-dialog.js","sources":["../../../../src/components/app-dialog.tsx"],"sourcesContent":["import {\n Dialog,\n DialogProps,\n DialogActions,\n DialogActionsProps,\n DialogContent,\n DialogContentProps,\n DialogTitle,\n DialogTitleProps,\n StackProps,\n useTheme,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppDialogProps = DialogProps & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n titleStackProps?: StackProps;\n titleProps?: DialogTitleProps;\n actions?: React.ReactNode;\n actionsProps?: DialogActionsProps;\n children: React.ReactNode;\n dialogContentProps?: DialogContentProps;\n darkerBackdrop?: boolean;\n};\n\nexport const AppDialog = ({\n title,\n description,\n descriptionProps,\n children,\n titleStackProps,\n actions,\n titleProps,\n actionsProps,\n darkerBackdrop,\n dialogContentProps,\n slotProps,\n ...props\n}: AppDialogProps) => {\n const theme = useTheme();\n\n return (\n <Dialog\n fullWidth\n maxWidth=\"sm\"\n slotProps={{\n paper: {\n elevation: 4,\n ...slotProps?.paper,\n },\n backdrop: {\n sx: {\n backgroundColor: darkerBackdrop ? theme.palette.background.darkBackdrop : '',\n },\n ...slotProps?.backdrop,\n },\n }}\n {...props}\n >\n {(title || description) && (\n <DialogTitle {...titleProps}>\n <StackColumn {...titleStackProps} gap={3}>\n {title}\n {description && (\n <AppTypography variant=\"body2\" {...descriptionProps}>\n {description}\n </AppTypography>\n )}\n </StackColumn>\n </DialogTitle>\n )}\n <DialogContent {...dialogContentProps}>{children}</DialogContent>\n\n {actions && <DialogActions {...actionsProps}>{actions}</DialogActions>}\n </Dialog>\n );\n};\n"],"names":["useTheme","jsxs","Dialog","jsx","DialogTitle","StackColumn","AppTypography","DialogContent","DialogActions"],"mappings":";;;;;;AA+BO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,QAAQA,SAAAA,SAAA;AAEd,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,UACL,WAAW;AAAA,UACX,GAAG,WAAW;AAAA,QAAA;AAAA,QAEhB,UAAU;AAAA,UACR,IAAI;AAAA,YACF,iBAAiB,iBAAiB,MAAM,QAAQ,WAAW,eAAe;AAAA,UAAA;AAAA,UAE5E,GAAG,WAAW;AAAA,QAAA;AAAA,MAChB;AAAA,MAED,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACTC,2BAAAA,IAACC,SAAAA,aAAA,EAAa,GAAG,YACf,0CAACC,YAAAA,aAAA,EAAa,GAAG,iBAAiB,KAAK,GACpC,UAAA;AAAA,UAAA;AAAA,UACA,eACCF,2BAAAA,IAACG,cAAAA,eAAA,EAAc,SAAQ,SAAS,GAAG,kBAChC,UAAA,YAAA,CACH;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QAEFH,2BAAAA,IAACI,SAAAA,eAAA,EAAe,GAAG,oBAAqB,SAAA,CAAS;AAAA,QAEhD,WAAWJ,2BAAAA,IAACK,SAAAA,eAAA,EAAe,GAAG,cAAe,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D;;"}
1
+ {"version":3,"file":"app-dialog.js","sources":["../../../../src/components/app-dialog.tsx"],"sourcesContent":["import {\n Dialog,\n DialogProps,\n DialogActions,\n DialogActionsProps,\n DialogContent,\n DialogContentProps,\n DialogTitle,\n DialogTitleProps,\n StackProps,\n useTheme,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppDialogProps = DialogProps & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n titleStackProps?: StackProps;\n titleProps?: DialogTitleProps;\n actions?: React.ReactNode;\n actionsProps?: DialogActionsProps;\n children?: React.ReactNode;\n dialogContentProps?: DialogContentProps;\n darkerBackdrop?: boolean;\n};\n\nexport const AppDialog = ({\n title,\n description,\n descriptionProps,\n children,\n titleStackProps,\n actions,\n titleProps,\n actionsProps,\n darkerBackdrop,\n dialogContentProps,\n slotProps,\n ...props\n}: AppDialogProps) => {\n const theme = useTheme();\n\n return (\n <Dialog\n fullWidth\n maxWidth=\"sm\"\n slotProps={{\n paper: {\n elevation: 4,\n ...slotProps?.paper,\n },\n backdrop: {\n sx: {\n backgroundColor: darkerBackdrop ? theme.palette.background.darkBackdrop : '',\n },\n ...slotProps?.backdrop,\n },\n }}\n {...props}\n >\n {(title || description) && (\n <DialogTitle {...titleProps}>\n <StackColumn {...titleStackProps} gap={3}>\n {title}\n {description && (\n <AppTypography variant=\"body2\" {...descriptionProps}>\n {description}\n </AppTypography>\n )}\n </StackColumn>\n </DialogTitle>\n )}\n <DialogContent {...dialogContentProps}>{children}</DialogContent>\n\n {actions && <DialogActions {...actionsProps}>{actions}</DialogActions>}\n </Dialog>\n );\n};\n"],"names":["useTheme","jsxs","Dialog","jsx","DialogTitle","StackColumn","AppTypography","DialogContent","DialogActions"],"mappings":";;;;;;AA+BO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,QAAQA,SAAAA,SAAA;AAEd,SACEC,2BAAAA;AAAAA,IAACC,SAAAA;AAAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,UACL,WAAW;AAAA,UACX,GAAG,WAAW;AAAA,QAAA;AAAA,QAEhB,UAAU;AAAA,UACR,IAAI;AAAA,YACF,iBAAiB,iBAAiB,MAAM,QAAQ,WAAW,eAAe;AAAA,UAAA;AAAA,UAE5E,GAAG,WAAW;AAAA,QAAA;AAAA,MAChB;AAAA,MAED,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACTC,2BAAAA,IAACC,SAAAA,aAAA,EAAa,GAAG,YACf,0CAACC,YAAAA,aAAA,EAAa,GAAG,iBAAiB,KAAK,GACpC,UAAA;AAAA,UAAA;AAAA,UACA,eACCF,2BAAAA,IAACG,cAAAA,eAAA,EAAc,SAAQ,SAAS,GAAG,kBAChC,UAAA,YAAA,CACH;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QAEFH,2BAAAA,IAACI,SAAAA,eAAA,EAAe,GAAG,oBAAqB,SAAA,CAAS;AAAA,QAEhD,WAAWJ,2BAAAA,IAACK,SAAAA,eAAA,EAAe,GAAG,cAAe,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D;;"}
@@ -1 +1 @@
1
- {"version":3,"file":"app-dialog-with-features.js","sources":["../../../../src/components/app-dialog-with-features.tsx"],"sourcesContent":["import { Box, StackProps, CircularProgress, styled } from '@mui/material';\n\nimport { AppDialog, AppDialogProps } from './app-dialog';\nimport { AppInputSearchProps, AppInputBaseSearch } from './app-input-base-search';\nimport { AppPagination, AppPaginationProps } from './app-pagination';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppDialogWithFeaturesProps = AppDialogProps & {\n open: boolean;\n onClose: () => void;\n search: string;\n onSearchChange?: (search: string) => void;\n searchProps?: AppInputSearchProps;\n pagination?: AppPaginationProps;\n isLoading?: boolean;\n contentProps?: StackProps;\n children?: React.ReactNode;\n};\n\nexport const AppDialogWithFeatures: React.FC<AppDialogWithFeaturesProps> = ({\n open,\n onClose,\n search,\n onSearchChange,\n title,\n searchProps,\n pagination,\n children,\n isLoading,\n contentProps,\n ...props\n}) => {\n return (\n <AppDialog\n open={open}\n onClose={onClose}\n title={title}\n fullWidth\n dialogContentProps={{ sx: { overflow: 'hidden' } }}\n {...props}\n >\n <Content>\n {isLoading && (\n <StackRow width=\"100%\" height={160} alignItems=\"center\" justifyContent=\"center\">\n <CircularProgress />\n </StackRow>\n )}\n\n {!isLoading && (\n <>\n {/* Search */}\n {(search || onSearchChange) && (\n <SearchInput\n fullWidth\n value={search}\n onChange={e => onSearchChange?.(e.target.value)}\n name=\"search\"\n size=\"small\"\n {...searchProps}\n />\n )}\n\n {/* Main content */}\n <StackColumn gap={2} maxHeight=\"500px\" overflow=\"auto\" {...contentProps}>\n {children}\n </StackColumn>\n\n {/* Pagination */}\n {pagination && (\n <StackRow alignItems=\"center\" justifyContent=\"center\">\n <AppPagination\n size=\"medium\"\n count={pagination.count}\n page={pagination.page}\n onChange={pagination.onChange}\n />\n </StackRow>\n )}\n </>\n )}\n </Content>\n </AppDialog>\n );\n};\n\n//\n\nconst SearchInput = styled(AppInputBaseSearch)(({ theme }) => ({\n marginTop: 0,\n '.MuiInputBase-root': {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n fieldset: {\n borderRadius: theme.spacing(40),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n\n input: { paddingLeft: theme.spacing(1) },\n },\n '.MuiInputAdornment-root': {\n marginLeft: theme.spacing(0),\n marginRight: theme.spacing(0),\n pointerEvents: 'none',\n },\n}));\n\nconst Content = styled(Box)(({ theme }) => ({\n display: 'grid',\n gridTemplateRows: 'auto 1fr auto',\n gap: theme.spacing(2),\n}));\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,wBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT,oBAAoB,EAAE,IAAI,EAAE,UAAU,WAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,+BAAC,SAAA,EACE,UAAA;AAAA,QAAA,aACC,oBAAC,UAAA,EAAS,OAAM,QAAO,QAAQ,KAAK,YAAW,UAAS,gBAAe,UACrE,UAAA,oBAAC,kBAAA,CAAA,CAAiB,GACpB;AAAA,QAGD,CAAC,aACA,qBAAA,UAAA,EAEI,UAAA;AAAA,WAAA,UAAU,mBACV;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAO;AAAA,cACP,UAAU,CAAA,MAAK,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAC9C,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAKR,oBAAC,aAAA,EAAY,KAAK,GAAG,WAAU,SAAQ,UAAS,QAAQ,GAAG,cACxD,SAAA,CACH;AAAA,UAGC,cACC,oBAAC,UAAA,EAAS,YAAW,UAAS,gBAAe,UAC3C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,WAAW;AAAA,cAClB,MAAM,WAAW;AAAA,cACjB,UAAU,WAAW;AAAA,YAAA;AAAA,UAAA,EACvB,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAIA,MAAM,cAAc,OAAO,kBAAkB,EAAE,CAAC,EAAE,aAAa;AAAA,EAC7D,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,UAAU;AAAA,MACR,cAAc,MAAM,QAAQ,EAAE;AAAA,MAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,MAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,IAG/B,OAAO,EAAE,aAAa,MAAM,QAAQ,CAAC,EAAA;AAAA,EAAE;AAAA,EAEzC,2BAA2B;AAAA,IACzB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,eAAe;AAAA,EAAA;AAEnB,EAAE;AAEF,MAAM,UAAU,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC1C,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;"}
1
+ {"version":3,"file":"app-dialog-with-features.js","sources":["../../../../src/components/app-dialog-with-features.tsx"],"sourcesContent":["import { Box, StackProps, CircularProgress, styled } from '@mui/material';\n\nimport { AppDialog, AppDialogProps } from './app-dialog';\nimport { AppInputSearchProps, AppInputBaseSearch } from './app-input-base-search';\nimport { AppPagination, AppPaginationProps } from './app-pagination';\nimport { StackColumn } from './stack-column';\nimport { StackRow } from './stack-row';\n\n//\n//\n\nexport type AppDialogWithFeaturesProps = AppDialogProps & {\n open: boolean;\n onClose: () => void;\n search?: string;\n onSearchChange?: (search: string) => void;\n searchProps?: AppInputSearchProps;\n pagination?: AppPaginationProps;\n isLoading?: boolean;\n contentProps?: StackProps;\n children?: React.ReactNode;\n};\n\nexport const AppDialogWithFeatures: React.FC<AppDialogWithFeaturesProps> = ({\n open,\n onClose,\n search,\n onSearchChange,\n title,\n searchProps,\n pagination,\n children,\n isLoading,\n contentProps,\n ...props\n}) => {\n return (\n <AppDialog\n open={open}\n onClose={onClose}\n title={title}\n fullWidth\n dialogContentProps={{ sx: { overflow: 'hidden' } }}\n {...props}\n >\n <Content>\n {isLoading && (\n <StackRow width=\"100%\" height={160} alignItems=\"center\" justifyContent=\"center\">\n <CircularProgress />\n </StackRow>\n )}\n\n {!isLoading && (\n <>\n {/* Search */}\n {(search || onSearchChange) && (\n <SearchInput\n fullWidth\n value={search}\n onChange={e => onSearchChange?.(e.target.value)}\n name=\"search\"\n size=\"small\"\n {...searchProps}\n />\n )}\n\n {/* Main content */}\n <StackColumn gap={2} maxHeight=\"500px\" overflow=\"auto\" {...contentProps}>\n {children}\n </StackColumn>\n\n {/* Pagination */}\n {pagination && (\n <StackRow alignItems=\"center\" justifyContent=\"center\">\n <AppPagination\n size=\"medium\"\n count={pagination.count}\n page={pagination.page}\n onChange={pagination.onChange}\n />\n </StackRow>\n )}\n </>\n )}\n </Content>\n </AppDialog>\n );\n};\n\n//\n\nconst SearchInput = styled(AppInputBaseSearch)(({ theme }) => ({\n marginTop: 0,\n '.MuiInputBase-root': {\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n fieldset: {\n borderRadius: theme.spacing(40),\n paddingLeft: theme.spacing(2),\n paddingRight: theme.spacing(2),\n },\n\n input: { paddingLeft: theme.spacing(1) },\n },\n '.MuiInputAdornment-root': {\n marginLeft: theme.spacing(0),\n marginRight: theme.spacing(0),\n pointerEvents: 'none',\n },\n}));\n\nconst Content = styled(Box)(({ theme }) => ({\n display: 'grid',\n gridTemplateRows: 'auto 1fr auto',\n gap: theme.spacing(2),\n}));\n"],"names":[],"mappings":";;;;;;;AAuBO,MAAM,wBAA8D,CAAC;AAAA,EAC1E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAM;AACJ,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC;AAAA,MACA;AAAA,MACA;AAAA,MACA,WAAS;AAAA,MACT,oBAAoB,EAAE,IAAI,EAAE,UAAU,WAAS;AAAA,MAC9C,GAAG;AAAA,MAEJ,+BAAC,SAAA,EACE,UAAA;AAAA,QAAA,aACC,oBAAC,UAAA,EAAS,OAAM,QAAO,QAAQ,KAAK,YAAW,UAAS,gBAAe,UACrE,UAAA,oBAAC,kBAAA,CAAA,CAAiB,GACpB;AAAA,QAGD,CAAC,aACA,qBAAA,UAAA,EAEI,UAAA;AAAA,WAAA,UAAU,mBACV;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAS;AAAA,cACT,OAAO;AAAA,cACP,UAAU,CAAA,MAAK,iBAAiB,EAAE,OAAO,KAAK;AAAA,cAC9C,MAAK;AAAA,cACL,MAAK;AAAA,cACJ,GAAG;AAAA,YAAA;AAAA,UAAA;AAAA,UAKR,oBAAC,aAAA,EAAY,KAAK,GAAG,WAAU,SAAQ,UAAS,QAAQ,GAAG,cACxD,SAAA,CACH;AAAA,UAGC,cACC,oBAAC,UAAA,EAAS,YAAW,UAAS,gBAAe,UAC3C,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,OAAO,WAAW;AAAA,cAClB,MAAM,WAAW;AAAA,cACjB,UAAU,WAAW;AAAA,YAAA;AAAA,UAAA,EACvB,CACF;AAAA,QAAA,EAAA,CAEJ;AAAA,MAAA,EAAA,CAEJ;AAAA,IAAA;AAAA,EAAA;AAGN;AAIA,MAAM,cAAc,OAAO,kBAAkB,EAAE,CAAC,EAAE,aAAa;AAAA,EAC7D,WAAW;AAAA,EACX,sBAAsB;AAAA,IACpB,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAC7B,UAAU;AAAA,MACR,cAAc,MAAM,QAAQ,EAAE;AAAA,MAC9B,aAAa,MAAM,QAAQ,CAAC;AAAA,MAC5B,cAAc,MAAM,QAAQ,CAAC;AAAA,IAAA;AAAA,IAG/B,OAAO,EAAE,aAAa,MAAM,QAAQ,CAAC,EAAA;AAAA,EAAE;AAAA,EAEzC,2BAA2B;AAAA,IACzB,YAAY,MAAM,QAAQ,CAAC;AAAA,IAC3B,aAAa,MAAM,QAAQ,CAAC;AAAA,IAC5B,eAAe;AAAA,EAAA;AAEnB,EAAE;AAEF,MAAM,UAAU,OAAO,GAAG,EAAE,CAAC,EAAE,aAAa;AAAA,EAC1C,SAAS;AAAA,EACT,kBAAkB;AAAA,EAClB,KAAK,MAAM,QAAQ,CAAC;AACtB,EAAE;"}
@@ -1 +1 @@
1
- {"version":3,"file":"app-dialog.js","sources":["../../../../src/components/app-dialog.tsx"],"sourcesContent":["import {\n Dialog,\n DialogProps,\n DialogActions,\n DialogActionsProps,\n DialogContent,\n DialogContentProps,\n DialogTitle,\n DialogTitleProps,\n StackProps,\n useTheme,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppDialogProps = DialogProps & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n titleStackProps?: StackProps;\n titleProps?: DialogTitleProps;\n actions?: React.ReactNode;\n actionsProps?: DialogActionsProps;\n children: React.ReactNode;\n dialogContentProps?: DialogContentProps;\n darkerBackdrop?: boolean;\n};\n\nexport const AppDialog = ({\n title,\n description,\n descriptionProps,\n children,\n titleStackProps,\n actions,\n titleProps,\n actionsProps,\n darkerBackdrop,\n dialogContentProps,\n slotProps,\n ...props\n}: AppDialogProps) => {\n const theme = useTheme();\n\n return (\n <Dialog\n fullWidth\n maxWidth=\"sm\"\n slotProps={{\n paper: {\n elevation: 4,\n ...slotProps?.paper,\n },\n backdrop: {\n sx: {\n backgroundColor: darkerBackdrop ? theme.palette.background.darkBackdrop : '',\n },\n ...slotProps?.backdrop,\n },\n }}\n {...props}\n >\n {(title || description) && (\n <DialogTitle {...titleProps}>\n <StackColumn {...titleStackProps} gap={3}>\n {title}\n {description && (\n <AppTypography variant=\"body2\" {...descriptionProps}>\n {description}\n </AppTypography>\n )}\n </StackColumn>\n </DialogTitle>\n )}\n <DialogContent {...dialogContentProps}>{children}</DialogContent>\n\n {actions && <DialogActions {...actionsProps}>{actions}</DialogActions>}\n </Dialog>\n );\n};\n"],"names":[],"mappings":";;;;AA+BO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,UACL,WAAW;AAAA,UACX,GAAG,WAAW;AAAA,QAAA;AAAA,QAEhB,UAAU;AAAA,UACR,IAAI;AAAA,YACF,iBAAiB,iBAAiB,MAAM,QAAQ,WAAW,eAAe;AAAA,UAAA;AAAA,UAE5E,GAAG,WAAW;AAAA,QAAA;AAAA,MAChB;AAAA,MAED,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACT,oBAAC,aAAA,EAAa,GAAG,YACf,+BAAC,aAAA,EAAa,GAAG,iBAAiB,KAAK,GACpC,UAAA;AAAA,UAAA;AAAA,UACA,eACC,oBAAC,eAAA,EAAc,SAAQ,SAAS,GAAG,kBAChC,UAAA,YAAA,CACH;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QAEF,oBAAC,eAAA,EAAe,GAAG,oBAAqB,SAAA,CAAS;AAAA,QAEhD,WAAW,oBAAC,eAAA,EAAe,GAAG,cAAe,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D;"}
1
+ {"version":3,"file":"app-dialog.js","sources":["../../../../src/components/app-dialog.tsx"],"sourcesContent":["import {\n Dialog,\n DialogProps,\n DialogActions,\n DialogActionsProps,\n DialogContent,\n DialogContentProps,\n DialogTitle,\n DialogTitleProps,\n StackProps,\n useTheme,\n} from '@mui/material';\nimport { AppTypographyProps, AppTypography } from './app-typography';\nimport { StackColumn } from './stack-column';\n\n//\n//\n\nexport type AppDialogProps = DialogProps & {\n title?: React.ReactNode;\n description?: React.ReactNode;\n descriptionProps?: AppTypographyProps;\n titleStackProps?: StackProps;\n titleProps?: DialogTitleProps;\n actions?: React.ReactNode;\n actionsProps?: DialogActionsProps;\n children?: React.ReactNode;\n dialogContentProps?: DialogContentProps;\n darkerBackdrop?: boolean;\n};\n\nexport const AppDialog = ({\n title,\n description,\n descriptionProps,\n children,\n titleStackProps,\n actions,\n titleProps,\n actionsProps,\n darkerBackdrop,\n dialogContentProps,\n slotProps,\n ...props\n}: AppDialogProps) => {\n const theme = useTheme();\n\n return (\n <Dialog\n fullWidth\n maxWidth=\"sm\"\n slotProps={{\n paper: {\n elevation: 4,\n ...slotProps?.paper,\n },\n backdrop: {\n sx: {\n backgroundColor: darkerBackdrop ? theme.palette.background.darkBackdrop : '',\n },\n ...slotProps?.backdrop,\n },\n }}\n {...props}\n >\n {(title || description) && (\n <DialogTitle {...titleProps}>\n <StackColumn {...titleStackProps} gap={3}>\n {title}\n {description && (\n <AppTypography variant=\"body2\" {...descriptionProps}>\n {description}\n </AppTypography>\n )}\n </StackColumn>\n </DialogTitle>\n )}\n <DialogContent {...dialogContentProps}>{children}</DialogContent>\n\n {actions && <DialogActions {...actionsProps}>{actions}</DialogActions>}\n </Dialog>\n );\n};\n"],"names":[],"mappings":";;;;AA+BO,MAAM,YAAY,CAAC;AAAA,EACxB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsB;AACpB,QAAM,QAAQ,SAAA;AAEd,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,UAAS;AAAA,MACT,WAAW;AAAA,QACT,OAAO;AAAA,UACL,WAAW;AAAA,UACX,GAAG,WAAW;AAAA,QAAA;AAAA,QAEhB,UAAU;AAAA,UACR,IAAI;AAAA,YACF,iBAAiB,iBAAiB,MAAM,QAAQ,WAAW,eAAe;AAAA,UAAA;AAAA,UAE5E,GAAG,WAAW;AAAA,QAAA;AAAA,MAChB;AAAA,MAED,GAAG;AAAA,MAEF,UAAA;AAAA,SAAA,SAAS,gBACT,oBAAC,aAAA,EAAa,GAAG,YACf,+BAAC,aAAA,EAAa,GAAG,iBAAiB,KAAK,GACpC,UAAA;AAAA,UAAA;AAAA,UACA,eACC,oBAAC,eAAA,EAAc,SAAQ,SAAS,GAAG,kBAChC,UAAA,YAAA,CACH;AAAA,QAAA,EAAA,CAEJ,EAAA,CACF;AAAA,QAEF,oBAAC,eAAA,EAAe,GAAG,oBAAqB,SAAA,CAAS;AAAA,QAEhD,WAAW,oBAAC,eAAA,EAAe,GAAG,cAAe,UAAA,QAAA,CAAQ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAG5D;"}
@@ -5,7 +5,7 @@ import { AppPaginationProps } from './app-pagination';
5
5
  export type AppDialogWithFeaturesProps = AppDialogProps & {
6
6
  open: boolean;
7
7
  onClose: () => void;
8
- search: string;
8
+ search?: string;
9
9
  onSearchChange?: (search: string) => void;
10
10
  searchProps?: AppInputSearchProps;
11
11
  pagination?: AppPaginationProps;
@@ -8,7 +8,7 @@ export type AppDialogProps = DialogProps & {
8
8
  titleProps?: DialogTitleProps;
9
9
  actions?: React.ReactNode;
10
10
  actionsProps?: DialogActionsProps;
11
- children: React.ReactNode;
11
+ children?: React.ReactNode;
12
12
  dialogContentProps?: DialogContentProps;
13
13
  darkerBackdrop?: boolean;
14
14
  };