@xanui/ui 1.1.65 → 1.1.67
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.
- package/Alert/index.cjs +4 -2
- package/Alert/index.cjs.map +1 -1
- package/Alert/index.js +4 -2
- package/Alert/index.js.map +1 -1
- package/Datatable/index.cjs +22 -10
- package/Datatable/index.cjs.map +1 -1
- package/Datatable/index.js +22 -10
- package/Datatable/index.js.map +1 -1
- package/package.json +1 -1
package/Alert/index.cjs
CHANGED
|
@@ -75,7 +75,8 @@ const Alert = (_a) => {
|
|
|
75
75
|
flex: 1,
|
|
76
76
|
color: template.primary.color,
|
|
77
77
|
textAlign: isRow ? "left" : "center",
|
|
78
|
-
gap: isRow ? 0 : 1
|
|
78
|
+
gap: isRow ? 0 : 1,
|
|
79
|
+
width: "100%"
|
|
79
80
|
}, children: [title && jsxRuntime.jsx(jsxRuntime.Fragment, { children: React.isValidElement(title) ? jsxRuntime.jsx(core.Tag, { className: "alert-title", children: title }) : jsxRuntime.jsx(index$1, { className: "alert-titles", variant: "text", sx: {
|
|
80
81
|
fontWeight: 500,
|
|
81
82
|
color: template.primary.color
|
|
@@ -150,7 +151,8 @@ const ConfirmAlert = (props) => {
|
|
|
150
151
|
Alert.confirm = (_a) => {
|
|
151
152
|
var _b;
|
|
152
153
|
var { onConfirm, onCancel } = _a, props = tslib.__rest(_a, ["onConfirm", "onCancel"]);
|
|
153
|
-
const
|
|
154
|
+
const Inst = (_props) => jsxRuntime.jsx(ConfirmAlert, Object.assign({}, _props));
|
|
155
|
+
const confirm = core.Renderar.render(Inst, Object.assign(Object.assign({}, props), { open: true, loading: false, onConfirm: async () => {
|
|
154
156
|
if (onConfirm) {
|
|
155
157
|
confirm.updateProps({ loading: true });
|
|
156
158
|
if (onConfirm)
|
package/Alert/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const confirm = Renderar.render(ConfirmAlert as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const Inst = (_props: any) => <ConfirmAlert {..._props} />\n const confirm = Renderar.render(Inst as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
|
package/Alert/index.js
CHANGED
|
@@ -73,7 +73,8 @@ const Alert = (_a) => {
|
|
|
73
73
|
flex: 1,
|
|
74
74
|
color: template.primary.color,
|
|
75
75
|
textAlign: isRow ? "left" : "center",
|
|
76
|
-
gap: isRow ? 0 : 1
|
|
76
|
+
gap: isRow ? 0 : 1,
|
|
77
|
+
width: "100%"
|
|
77
78
|
}, children: [title && jsx(Fragment, { children: isValidElement(title) ? jsx(Tag, { className: "alert-title", children: title }) : jsx(Text, { className: "alert-titles", variant: "text", sx: {
|
|
78
79
|
fontWeight: 500,
|
|
79
80
|
color: template.primary.color
|
|
@@ -148,7 +149,8 @@ const ConfirmAlert = (props) => {
|
|
|
148
149
|
Alert.confirm = (_a) => {
|
|
149
150
|
var _b;
|
|
150
151
|
var { onConfirm, onCancel } = _a, props = __rest(_a, ["onConfirm", "onCancel"]);
|
|
151
|
-
const
|
|
152
|
+
const Inst = (_props) => jsx(ConfirmAlert, Object.assign({}, _props));
|
|
153
|
+
const confirm = Renderar.render(Inst, Object.assign(Object.assign({}, props), { open: true, loading: false, onConfirm: async () => {
|
|
152
154
|
if (onConfirm) {
|
|
153
155
|
confirm.updateProps({ loading: true });
|
|
154
156
|
if (onConfirm)
|
package/Alert/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const confirm = Renderar.render(ConfirmAlert as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;;;;AAQgB;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Alert/index.tsx"],"sourcesContent":["\"use client\";\nimport { Tag, TagProps, useBreakpointProps, useColorTemplate, useInterface, useBreakpointPropsType, Renderar, UseColorTemplateType, UseColorTemplateColor, UseTransitionVariantTypes } from \"@xanui/core\"\nimport React, { isValidElement, ReactElement } from \"react\"\nimport Text from \"../Text\"\nimport InfoIcon from '@xanui/icons/Info';\nimport WarningIcon from '@xanui/icons/Warning';\nimport SuccessIcon from '@xanui/icons/CheckCircle';\nimport ErrorIcon from '@xanui/icons/Cancel';\nimport IconClose from '@xanui/icons/Close';\nimport IconButton from \"../IconButton\";\nimport Modal, { ModalProps } from \"../Modal\";\nimport Button, { ButtonProps } from \"../Button\";\n\nexport type AlertProps = Omit<TagProps<\"div\">, \"content\" | \"title\" | \"direction\"> & {\n title?: useBreakpointPropsType<string | ReactElement>;\n direction?: useBreakpointPropsType<\"row\" | \"column\">;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n onClose?: React.DOMAttributes<\"button\">['onClick'];\n}\n\nexport type AlertMesssageType = string | ReactElement | AlertProps\n\nconst Alert = ({ children, ...rest }: AlertProps) => {\n let [{\n title,\n variant,\n icon,\n color,\n direction,\n slotProps,\n onClose,\n ..._props\n }] = useInterface<any>(\"Alert\", rest, {\n variant: \"fill\"\n })\n color ??= \"default\"\n direction ??= \"row\"\n\n const _p: any = {}\n if (title) _p.title = title\n if (variant) _p.variant = variant\n if (icon) _p.icon = icon\n if (color) _p.color = color\n if (direction) _p.direction = direction\n\n const p: any = useBreakpointProps(_p)\n\n title = p.title\n variant = p.variant\n icon = p.icon\n color = p.color\n direction = p.direction\n\n let isRow = direction === 'row'\n\n\n const template = useColorTemplate(color, variant)\n\n let iconsx = {\n fontSize: isRow ? 22 : 40,\n color: color === 'default' ? \"text.primary\" : template.primary.color\n }\n\n const icons: any = {\n \"info\": <InfoIcon sx={iconsx} />,\n \"warning\": <WarningIcon sx={iconsx} />,\n \"success\": <SuccessIcon sx={iconsx} />,\n \"danger\": <ErrorIcon sx={iconsx} />\n }\n\n let _icon = icons[icon] || icons[color]\n\n return (\n <Tag\n {..._props}\n baseClass=\"alert\"\n sxr={{\n justifyContent: \"flex-start\",\n position: \"relative\",\n radius: 1,\n px: isRow ? (_icon ? .5 : 2) : 3,\n py: isRow ? .5 : 3,\n flexDirection: \"column\",\n display: 'flex',\n ..._props?.sx\n }}\n {...template.primary}\n >\n {\n onClose && <IconButton\n color={color}\n variant={variant === 'fill' ? \"fill\" : \"text\"}\n size={25}\n sx={{\n position: \"absolute\",\n top: 5,\n right: 5\n }}\n onClick={onClose}\n className=\"alert-close-button\"\n >\n <IconClose fontSize={18} />\n </IconButton>\n }\n <Tag\n sx={{\n display: \"flex\",\n gap: 1,\n flexDirection: direction,\n alignItems: isRow ? \"flex-start\" : \"center\"\n }}\n baseClass=\"alert-container\"\n >\n {\n _icon && <Tag\n baseClass=\"alert-icon\"\n sxr={{\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n p: isRow ? .5 : 0,\n \"& svg\": {\n color: template.primary.color\n }\n }}\n >\n {_icon}\n </Tag>\n }\n <Tag\n baseClass=\"alert-content\"\n sxr={{\n display: \"flex\",\n flexDirection: \"column\",\n flex: 1,\n color: template.primary.color,\n textAlign: isRow ? \"left\" : \"center\",\n gap: isRow ? 0 : 1,\n width: \"100%\"\n }}\n >\n {title && <>\n {\n isValidElement(title) ? <Tag className=\"alert-title\">{title}</Tag> : <Text\n className=\"alert-titles\"\n variant=\"text\"\n sx={{\n fontWeight: 500,\n color: template.primary.color\n }}\n >{title}</Text>\n }\n </>}\n <Tag\n sxr={{\n font: \"button\",\n }}\n >\n {children}\n </Tag>\n </Tag>\n </Tag>\n </Tag>\n )\n}\n\nexport type ConfirmAlertProps = Omit<AlertProps, 'children' | 'onClose' | 'variant' | \"size\"> & {\n open: boolean;\n loading: boolean;\n content: string | ReactElement,\n size?: \"small\" | \"medium\" | \"large\" | number;\n closeButton?: boolean;\n clickOutsideToClose?: boolean;\n okButtonText?: string;\n cancelButtonText?: string;\n hideOkButton?: boolean;\n hideCancelButton?: boolean;\n buttonPlacement?: \"start\" | \"end\" | \"between\" | \"full\";\n variant?: \"text\" | \"fill\"\n onConfirm?: () => Promise<void> | void;\n onCancel?: () => Promise<void> | void;\n transition?: UseTransitionVariantTypes;\n blurMode?: ModalProps['blurMode'];\n slotProps?: {\n modal?: Omit<ModalProps, 'open' | \"children\">;\n okButton?: Omit<ButtonProps, \"children\">;\n closeButton?: Omit<ButtonProps, \"children\">;\n }\n}\n\n\nconst ConfirmAlert = (props: ConfirmAlertProps) => {\n let {\n open,\n loading,\n content,\n size,\n color,\n direction,\n variant,\n closeButton,\n clickOutsideToClose,\n okButtonText,\n cancelButtonText,\n hideOkButton,\n hideCancelButton,\n buttonPlacement,\n onConfirm,\n onCancel,\n transition,\n blurMode,\n slotProps,\n ...rest\n } = props\n\n hideOkButton ??= false\n hideCancelButton ??= false\n\n size ??= \"small\"\n color ??= 'default'\n variant ??= \"text\"\n direction ??= \"column\"\n buttonPlacement ??= \"end\"\n let sx: any = {};\n\n switch (buttonPlacement) {\n case \"start\":\n sx.justifyContent = 'flex-start'\n break;\n case \"end\":\n sx.justifyContent = 'flex-end'\n break;\n case \"between\":\n sx.justifyContent = 'space-between'\n break;\n case \"full\":\n sx = {\n \"& button\": {\n flex: 1\n }\n }\n break;\n }\n\n let sizes: any = {\n small: 320,\n medium: 400,\n large: 600\n }\n\n let okcolor = color\n let closecolor = color\n if (color === 'default') {\n okcolor = 'brand'\n closecolor = 'default'\n variant = 'text'\n } else {\n if (variant === 'fill') {\n okcolor = 'default'\n closecolor = 'default'\n } else {\n okcolor = color\n closecolor = 'default'\n }\n }\n\n return (<Modal\n open={open}\n {...slotProps?.modal}\n size={sizes[size] || size}\n blur={40}\n blurMode={blurMode || \"transparent\"}\n transition={transition || \"zoom\"}\n onClickOutside={async () => {\n if (clickOutsideToClose && !loading) {\n onCancel && await onCancel()\n }\n }}\n >\n <Alert\n direction={direction}\n sx={{\n px: 2,\n py: 1,\n pt: direction === 'row' ? 1 : 2\n }}\n color={color}\n variant={variant}\n onClose={closeButton ? close : undefined}\n {...rest}\n >\n {content}\n <Tag\n sxr={{\n display: \"flex\",\n gap: 1,\n pt: 4,\n flexDirection: \"row\",\n ...sx,\n }}\n >\n {!hideCancelButton && <Button\n disabled={loading}\n color={closecolor}\n variant=\"fill\"\n {...slotProps?.closeButton}\n onClick={async () => {\n onCancel && await onCancel()\n }}\n >{cancelButtonText || \"Close\"}</Button>}\n <Button\n loading={loading}\n color={okcolor}\n variant=\"fill\"\n {...slotProps?.okButton}\n\n onClick={async () => {\n onConfirm && await onConfirm()\n }}\n >{okButtonText || \"OK\"}</Button>\n </Tag>\n </Alert>\n </Modal>)\n}\n\n\nAlert.confirm = ({ onConfirm, onCancel, ...props }: Omit<ConfirmAlertProps, \"open\" | \"loading\">) => {\n const Inst = (_props: any) => <ConfirmAlert {..._props} />\n const confirm = Renderar.render(Inst as any, {\n ...props,\n open: true,\n loading: false,\n onConfirm: async () => {\n if (onConfirm) {\n confirm.updateProps({ loading: true })\n if (onConfirm) await onConfirm()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n onCancel: async () => {\n if (onCancel) {\n confirm.updateProps({ loading: true })\n await onCancel()\n confirm.updateProps({ open: false, loading: false })\n } else {\n confirm.updateProps({ open: false })\n }\n },\n slotProps: {\n ...props.slotProps,\n modal: {\n ...props.slotProps?.modal,\n onClosed: () => {\n confirm.unrender()\n if (props?.slotProps?.modal?.onClosed) {\n props.slotProps?.modal?.onClosed()\n }\n },\n }\n },\n })\n}\n\nexport default Alert"],"names":[],"mappings":";;;;;;;;;;;;;;;AAwBA;AAAe;AACX;AAUI;;;;;AAMJ;AAAW;AACX;AAAa;AACb;AAAU;AACV;AAAW;AACX;AAAe;AAEf;AAEA;AACA;AACA;AACA;AACA;AAEA;;AAKA;;AAEI;;AAGJ;AACI;AACA;AACA;AACA;;;;AA2BgB;AACA;AACA;;AAUJ;AACA;AACA;;AAEH;AAOW;AACA;AACA;;AAEA;AACI;AACH;;AASL;AACA;AACA;AACA;;;AAGA;AACH;AAQe;AACA;;AAOR;AACH;AAQzB;AA2BA;;;;;;;;;;;AAmCQ;AACI;;AAEJ;AACI;;AAEJ;AACI;;AAEJ;AACI;AACI;AACI;AACH;;;;AAKb;AACI;AACA;AACA;;;;AAKJ;;;;;;AAKI;;;;;;;;;;AAiBI;AACI;;;AAOA;AACA;;AAEH;AAsBW;AACJ;AASI;;AAMxB;AAGA;;;AACI;;;;AAQY;;AACA;;;;;AAIR;;;;AAKQ;;;;;AAIR;;;AAOY;;;AAGJ;AAIhB;;"}
|
package/Datatable/index.cjs
CHANGED
|
@@ -14,6 +14,7 @@ var index$2 = require('../Stack/index.cjs');
|
|
|
14
14
|
var index = require('../Skeleton/index.cjs');
|
|
15
15
|
|
|
16
16
|
const DataTable = React.forwardRef((props, ref) => {
|
|
17
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
17
18
|
let [p] = core.useInterface("Datatable", props, {});
|
|
18
19
|
let _props = React.useMemo(() => {
|
|
19
20
|
let np = Object.assign({}, p);
|
|
@@ -51,19 +52,30 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
51
52
|
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, state: userState = {}, onChange, fixedHeader, hidePagination, slotProps,
|
|
52
53
|
// skip props for ViewBox
|
|
53
54
|
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = tslib.__rest(_props, ["rows", "tabs", "pagination", "state", "onChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
|
|
55
|
+
let perpage = 10;
|
|
56
|
+
let page = (_b = (_a = userState === null || userState === void 0 ? void 0 : userState.pagination) === null || _a === void 0 ? void 0 : _a.page) !== null && _b !== void 0 ? _b : 1;
|
|
57
|
+
if (perpages === null || perpages === void 0 ? void 0 : perpages.length) {
|
|
58
|
+
const userperpage = (_c = userState === null || userState === void 0 ? void 0 : userState.pagination) === null || _c === void 0 ? void 0 : _c.perpage;
|
|
59
|
+
if (userperpage && perpages.includes(userperpage)) {
|
|
60
|
+
perpage = userperpage;
|
|
61
|
+
}
|
|
62
|
+
else {
|
|
63
|
+
perpage = (perpages === null || perpages === void 0 ? void 0 : perpages.length) ? perpages[0] : 10;
|
|
64
|
+
}
|
|
65
|
+
}
|
|
54
66
|
const state = {
|
|
55
|
-
selected: (userState === null || userState === void 0 ? void 0 : userState.selected)
|
|
56
|
-
selectAll: (userState === null || userState === void 0 ? void 0 : userState.selectAll)
|
|
67
|
+
selected: (_d = userState === null || userState === void 0 ? void 0 : userState.selected) !== null && _d !== void 0 ? _d : [],
|
|
68
|
+
selectAll: (_e = userState === null || userState === void 0 ? void 0 : userState.selectAll) !== null && _e !== void 0 ? _e : false,
|
|
57
69
|
pagination: {
|
|
58
|
-
page
|
|
59
|
-
perpage
|
|
60
|
-
from:
|
|
61
|
-
to:
|
|
70
|
+
page,
|
|
71
|
+
perpage,
|
|
72
|
+
from: page ? (perpage * (page - 1)) + 1 : 1,
|
|
73
|
+
to: page ? perpage * page : perpage,
|
|
62
74
|
},
|
|
63
|
-
tab: tabs ? ((userState === null || userState === void 0 ? void 0 : userState.tab)
|
|
64
|
-
search: (userState === null || userState === void 0 ? void 0 : userState.search)
|
|
65
|
-
sortable: (userState === null || userState === void 0 ? void 0 : userState.sortable)
|
|
66
|
-
filters: (userState === null || userState === void 0 ? void 0 : userState.filters)
|
|
75
|
+
tab: tabs ? ((_g = (_f = userState === null || userState === void 0 ? void 0 : userState.tab) !== null && _f !== void 0 ? _f : tabs[0].value) !== null && _g !== void 0 ? _g : tabs[0].label.toLowerCase()) : "",
|
|
76
|
+
search: (_h = userState === null || userState === void 0 ? void 0 : userState.search) !== null && _h !== void 0 ? _h : "",
|
|
77
|
+
sortable: (_j = userState === null || userState === void 0 ? void 0 : userState.sortable) !== null && _j !== void 0 ? _j : {},
|
|
78
|
+
filters: (_k = userState === null || userState === void 0 ? void 0 : userState.filters) !== null && _k !== void 0 ? _k : {}
|
|
67
79
|
};
|
|
68
80
|
const update = (s) => {
|
|
69
81
|
onChange(Object.assign(Object.assign({}, state), s));
|
package/Datatable/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n\n const state = {\n selected: userState?.selected
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n let perpage = 10\n let page = userState?.pagination?.page ?? 1\n if (perpages?.length) {\n const userperpage = userState?.pagination?.perpage\n if (userperpage && perpages.includes(userperpage)) {\n perpage = userperpage\n } else {\n perpage = perpages?.length ? perpages[0] : 10\n }\n }\n const state = {\n selected: userState?.selected ?? [],\n selectAll: userState?.selectAll ?? false,\n pagination: {\n page,\n perpage,\n from: page ? (perpage * (page - 1)) + 1 : 1,\n to: page ? perpage * page : perpage,\n },\n tab: tabs ? (userState?.tab ?? tabs[0].value ?? tabs[0].label.toLowerCase()) : \"\",\n search: userState?.search ?? \"\",\n sortable: userState?.sortable ?? {},\n filters: userState?.filters ?? {}\n }\n\n const update = (s: Partial<DatatableState>) => {\n onChange({ ...state, ...s })\n }\n\n return (\n <ViewBox\n height=\"100%\"\n {...viewBoxProps}\n baseClass='datatable'\n ref={ref as any}\n sx={{\n ...viewBoxProps?.sx,\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!hidePagination && <TablePagination\n disabled={_props.skeleton ? true : false}\n {...slotProps?.pagination}\n total={total || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n slotProps={{\n select: {\n size: \"small\",\n }\n }}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAcA;;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;AACJ;AAEA;;;;AA4BA;;AAEI;;;;;;;;AAOJ;;;AAGI;;;AAGI;;AAEH;AACD;;;;;AAMJ;AACI;AACJ;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
|
package/Datatable/index.js
CHANGED
|
@@ -12,6 +12,7 @@ import Stack from '../Stack/index.js';
|
|
|
12
12
|
import Skeleton from '../Skeleton/index.js';
|
|
13
13
|
|
|
14
14
|
const DataTable = React.forwardRef((props, ref) => {
|
|
15
|
+
var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
|
|
15
16
|
let [p] = useInterface("Datatable", props, {});
|
|
16
17
|
let _props = useMemo(() => {
|
|
17
18
|
let np = Object.assign({}, p);
|
|
@@ -49,19 +50,30 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
49
50
|
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, state: userState = {}, onChange, fixedHeader, hidePagination, slotProps,
|
|
50
51
|
// skip props for ViewBox
|
|
51
52
|
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = __rest(_props, ["rows", "tabs", "pagination", "state", "onChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
|
|
53
|
+
let perpage = 10;
|
|
54
|
+
let page = (_b = (_a = userState === null || userState === void 0 ? void 0 : userState.pagination) === null || _a === void 0 ? void 0 : _a.page) !== null && _b !== void 0 ? _b : 1;
|
|
55
|
+
if (perpages === null || perpages === void 0 ? void 0 : perpages.length) {
|
|
56
|
+
const userperpage = (_c = userState === null || userState === void 0 ? void 0 : userState.pagination) === null || _c === void 0 ? void 0 : _c.perpage;
|
|
57
|
+
if (userperpage && perpages.includes(userperpage)) {
|
|
58
|
+
perpage = userperpage;
|
|
59
|
+
}
|
|
60
|
+
else {
|
|
61
|
+
perpage = (perpages === null || perpages === void 0 ? void 0 : perpages.length) ? perpages[0] : 10;
|
|
62
|
+
}
|
|
63
|
+
}
|
|
52
64
|
const state = {
|
|
53
|
-
selected: (userState === null || userState === void 0 ? void 0 : userState.selected)
|
|
54
|
-
selectAll: (userState === null || userState === void 0 ? void 0 : userState.selectAll)
|
|
65
|
+
selected: (_d = userState === null || userState === void 0 ? void 0 : userState.selected) !== null && _d !== void 0 ? _d : [],
|
|
66
|
+
selectAll: (_e = userState === null || userState === void 0 ? void 0 : userState.selectAll) !== null && _e !== void 0 ? _e : false,
|
|
55
67
|
pagination: {
|
|
56
|
-
page
|
|
57
|
-
perpage
|
|
58
|
-
from:
|
|
59
|
-
to:
|
|
68
|
+
page,
|
|
69
|
+
perpage,
|
|
70
|
+
from: page ? (perpage * (page - 1)) + 1 : 1,
|
|
71
|
+
to: page ? perpage * page : perpage,
|
|
60
72
|
},
|
|
61
|
-
tab: tabs ? ((userState === null || userState === void 0 ? void 0 : userState.tab)
|
|
62
|
-
search: (userState === null || userState === void 0 ? void 0 : userState.search)
|
|
63
|
-
sortable: (userState === null || userState === void 0 ? void 0 : userState.sortable)
|
|
64
|
-
filters: (userState === null || userState === void 0 ? void 0 : userState.filters)
|
|
73
|
+
tab: tabs ? ((_g = (_f = userState === null || userState === void 0 ? void 0 : userState.tab) !== null && _f !== void 0 ? _f : tabs[0].value) !== null && _g !== void 0 ? _g : tabs[0].label.toLowerCase()) : "",
|
|
74
|
+
search: (_h = userState === null || userState === void 0 ? void 0 : userState.search) !== null && _h !== void 0 ? _h : "",
|
|
75
|
+
sortable: (_j = userState === null || userState === void 0 ? void 0 : userState.sortable) !== null && _j !== void 0 ? _j : {},
|
|
76
|
+
filters: (_k = userState === null || userState === void 0 ? void 0 : userState.filters) !== null && _k !== void 0 ? _k : {}
|
|
65
77
|
};
|
|
66
78
|
const update = (s) => {
|
|
67
79
|
onChange(Object.assign(Object.assign({}, state), s));
|
package/Datatable/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n\n const state = {\n selected: userState?.selected
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n let perpage = 10\n let page = userState?.pagination?.page ?? 1\n if (perpages?.length) {\n const userperpage = userState?.pagination?.perpage\n if (userperpage && perpages.includes(userperpage)) {\n perpage = userperpage\n } else {\n perpage = perpages?.length ? perpages[0] : 10\n }\n }\n const state = {\n selected: userState?.selected ?? [],\n selectAll: userState?.selectAll ?? false,\n pagination: {\n page,\n perpage,\n from: page ? (perpage * (page - 1)) + 1 : 1,\n to: page ? perpage * page : perpage,\n },\n tab: tabs ? (userState?.tab ?? tabs[0].value ?? tabs[0].label.toLowerCase()) : \"\",\n search: userState?.search ?? \"\",\n sortable: userState?.sortable ?? {},\n filters: userState?.filters ?? {}\n }\n\n const update = (s: Partial<DatatableState>) => {\n onChange({ ...state, ...s })\n }\n\n return (\n <ViewBox\n height=\"100%\"\n {...viewBoxProps}\n baseClass='datatable'\n ref={ref as any}\n sx={{\n ...viewBoxProps?.sx,\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!hidePagination && <TablePagination\n disabled={_props.skeleton ? true : false}\n {...slotProps?.pagination}\n total={total || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n slotProps={{\n select: {\n size: \"small\",\n }\n }}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAcA;;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;AACJ;AAEA;;;;AA4BA;;AAEI;;;;;;;;AAOJ;;;AAGI;;;AAGI;;AAEH;AACD;;;;;AAMJ;AACI;AACJ;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
|