@xanui/ui 1.1.18 → 1.1.20
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/Datatable/index.js +1 -0
- package/Datatable/index.js.map +1 -1
- package/Datatable/index.mjs +1 -0
- package/Datatable/index.mjs.map +1 -1
- package/Datatable/types.d.ts +12 -2
- package/Layer/index.d.ts +1 -1
- package/Layer/index.js.map +1 -1
- package/Layer/index.mjs.map +1 -1
- package/package.json +2 -2
- package/useModal/index.d.ts +1 -1
- package/useModal/index.js +4 -4
- package/useModal/index.js.map +1 -1
- package/useModal/index.mjs +4 -4
- package/useModal/index.mjs.map +1 -1
package/Datatable/index.js
CHANGED
|
@@ -25,6 +25,7 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
25
25
|
},
|
|
26
26
|
tab: tabs ? ((defaultState === null || defaultState === void 0 ? void 0 : defaultState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
|
|
27
27
|
search: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.search) || "",
|
|
28
|
+
sortable: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.sortable) || {},
|
|
28
29
|
});
|
|
29
30
|
const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
|
|
30
31
|
React.useEffect(() => {
|
package/Datatable/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } 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';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [_props] = useInterface<any>(\"Datatable\", props, {})\n let {\n rows,\n tabs,\n totalCount,\n\n pagination: { perpages = [30, 50, 100] } = {},\n defaultState = {},\n onStateChange,\n\n fixedHeader,\n disablePagination,\n slotProps,\n } = _props\n\n const [state, setState] = useState<DatatableState>({\n selected: defaultState?.selected || [],\n selectAll: defaultState?.selectAll || false,\n pagination: {\n page: defaultState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: defaultState?.from || 1,\n to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: defaultState?.search || \"\",\n })\n\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n useEffect(() => {\n if (onStateChange) {\n onStateChange(state)\n }\n }, [state])\n\n return (\n <ViewBox\n baseClass='datatable'\n ref={ref as any}\n height=\"100%\"\n 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 {!disablePagination && <TablePagination\n {...slotProps?.pagination}\n total={totalCount || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } 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';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [_props] = useInterface<any>(\"Datatable\", props, {})\n let {\n rows,\n tabs,\n totalCount,\n\n pagination: { perpages = [30, 50, 100] } = {},\n defaultState = {},\n onStateChange,\n\n fixedHeader,\n disablePagination,\n slotProps,\n } = _props\n\n const [state, setState] = useState<DatatableState>({\n selected: defaultState?.selected || [],\n selectAll: defaultState?.selectAll || false,\n pagination: {\n page: defaultState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: defaultState?.from || 1,\n to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: defaultState?.search || \"\",\n sortable: defaultState?.sortable || {},\n })\n\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n useEffect(() => {\n if (onStateChange) {\n onStateChange(state)\n }\n }, [state])\n\n return (\n <ViewBox\n baseClass='datatable'\n ref={ref as any}\n height=\"100%\"\n 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 {!disablePagination && <TablePagination\n {...slotProps?.pagination}\n total={totalCount || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;AAGH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}
|
package/Datatable/index.mjs
CHANGED
|
@@ -23,6 +23,7 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
23
23
|
},
|
|
24
24
|
tab: tabs ? ((defaultState === null || defaultState === void 0 ? void 0 : defaultState.tab) || tabs[0].value || tabs[0].label.toLowerCase()) : "",
|
|
25
25
|
search: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.search) || "",
|
|
26
|
+
sortable: (defaultState === null || defaultState === void 0 ? void 0 : defaultState.sortable) || {},
|
|
26
27
|
});
|
|
27
28
|
const update = (s) => setState(o => (Object.assign(Object.assign({}, o), s)));
|
|
28
29
|
useEffect(() => {
|
package/Datatable/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } 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';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [_props] = useInterface<any>(\"Datatable\", props, {})\n let {\n rows,\n tabs,\n totalCount,\n\n pagination: { perpages = [30, 50, 100] } = {},\n defaultState = {},\n onStateChange,\n\n fixedHeader,\n disablePagination,\n slotProps,\n } = _props\n\n const [state, setState] = useState<DatatableState>({\n selected: defaultState?.selected || [],\n selectAll: defaultState?.selectAll || false,\n pagination: {\n page: defaultState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: defaultState?.from || 1,\n to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: defaultState?.search || \"\",\n })\n\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n useEffect(() => {\n if (onStateChange) {\n onStateChange(state)\n }\n }, [state])\n\n return (\n <ViewBox\n baseClass='datatable'\n ref={ref as any}\n height=\"100%\"\n 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 {!disablePagination && <TablePagination\n {...slotProps?.pagination}\n total={totalCount || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useState } 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';\n\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [_props] = useInterface<any>(\"Datatable\", props, {})\n let {\n rows,\n tabs,\n totalCount,\n\n pagination: { perpages = [30, 50, 100] } = {},\n defaultState = {},\n onStateChange,\n\n fixedHeader,\n disablePagination,\n slotProps,\n } = _props\n\n const [state, setState] = useState<DatatableState>({\n selected: defaultState?.selected || [],\n selectAll: defaultState?.selectAll || false,\n pagination: {\n page: defaultState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: defaultState?.from || 1,\n to: defaultState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (defaultState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: defaultState?.search || \"\",\n sortable: defaultState?.sortable || {},\n })\n\n const update = (s: Partial<DatatableState>) => setState(o => ({ ...o, ...s }))\n\n useEffect(() => {\n if (onStateChange) {\n onStateChange(state)\n }\n }, [state])\n\n return (\n <ViewBox\n baseClass='datatable'\n ref={ref as any}\n height=\"100%\"\n 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 {!disablePagination && <TablePagination\n {...slotProps?.pagination}\n total={totalCount || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;AAYA;AACI;AACA;AAcA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;AAGH;AAED;;;;;AAMA;AAEA;AAMY;AACI;AACA;AACA;AACA;;;AAOI;AACA;AACA;;AAwBA;AACJ;AAKpB;;"}
|
package/Datatable/types.d.ts
CHANGED
|
@@ -40,7 +40,7 @@ type DatatableProps = {
|
|
|
40
40
|
total?: number;
|
|
41
41
|
perpages?: number[];
|
|
42
42
|
};
|
|
43
|
-
defaultState?:
|
|
43
|
+
defaultState?: DatatableStatePartial;
|
|
44
44
|
onStateChange?: (state: DatatableState) => void;
|
|
45
45
|
filters?: {
|
|
46
46
|
[key: string]: DatatableFilter[];
|
|
@@ -61,9 +61,19 @@ type DatatableState = {
|
|
|
61
61
|
pagination: TablePaginationState;
|
|
62
62
|
tab: string;
|
|
63
63
|
search: string;
|
|
64
|
+
sortable: {
|
|
65
|
+
[field: string]: 'asc' | 'desc';
|
|
66
|
+
};
|
|
67
|
+
};
|
|
68
|
+
type DatatableStatePartial = {
|
|
69
|
+
selected?: number[];
|
|
70
|
+
selectAll?: boolean;
|
|
71
|
+
pagination?: Partial<TablePaginationState>;
|
|
72
|
+
tab?: string;
|
|
73
|
+
search?: string;
|
|
64
74
|
sortable?: {
|
|
65
75
|
[field: string]: 'asc' | 'desc';
|
|
66
76
|
};
|
|
67
77
|
};
|
|
68
78
|
|
|
69
|
-
export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, DatatableState, RowActionType, TabsProps };
|
|
79
|
+
export type { ColumnType, DataTableDefaultRow, DatatableFilter, DatatableProps, DatatableState, DatatableStatePartial, RowActionType, TabsProps };
|
package/Layer/index.d.ts
CHANGED
|
@@ -19,7 +19,7 @@ type LayerProps = {
|
|
|
19
19
|
root?: Omit<TagProps<"div">, "children">;
|
|
20
20
|
transition?: Omit<TransitionProps, "children" | "open" | "variant" | "onClose" | "onClosed" | "onOpen" | "onOpened">;
|
|
21
21
|
content?: Omit<TagProps<"div">, "children">;
|
|
22
|
-
clickOutside?: Omit<ClickOutsideProps, "children">;
|
|
22
|
+
clickOutside?: Omit<ClickOutsideProps, "children" | "onClickOutside">;
|
|
23
23
|
};
|
|
24
24
|
};
|
|
25
25
|
declare const Layer: {
|
package/Layer/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
package/Layer/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/Layer/index.tsx"],"sourcesContent":["\"use client\";\nimport { ReactNode, useEffect, useState } from 'react'\nimport { Tag, TagProps, useBreakpointProps, useBreakpointPropsType, useInterface, TransitionProps, Transition } from \"@xanui/core\"\nimport useBlurCss from '../useBlurCss';\nimport { Renderar } from \"@xanui/core\";\nimport ClickOutside, { ClickOutsideProps } from '../ClickOutside';\n\nexport type LayerProps = {\n open: boolean;\n children: ReactNode;\n transition?: TransitionProps['variant'];\n zIndex?: number;\n blur?: useBreakpointPropsType<number>\n blurMode?: useBreakpointPropsType<\"blur\" | \"transparent\">\n onClickOutside?: () => void;\n onOpen?: Function;\n onOpened?: Function;\n onClose?: Function;\n onClosed?: Function;\n slotProps?: {\n root?: Omit<TagProps<\"div\">, \"children\">;\n transition?: Omit<TransitionProps, \"children\" | \"open\" | \"variant\" | \"onClose\" | \"onClosed\" | \"onOpen\" | \"onOpened\">;\n content?: Omit<TagProps<\"div\">, \"children\">;\n clickOutside?: Omit<ClickOutsideProps, \"children\" | \"onClickOutside\">;\n }\n}\n\nconst Layer = ({ children, open, ...props }: LayerProps) => {\n let [{\n onClickOutside,\n placement,\n transition,\n zIndex,\n blur,\n blurMode,\n onOpen,\n onOpened,\n onClose,\n onClosed,\n slotProps\n }] = useInterface<any>(\"Layer\", props, {})\n\n const _p: any = {}\n if (blur) _p.blur = blur\n if (blurMode) _p.blurMode = blurMode\n const p: any = useBreakpointProps(_p)\n\n blur = p.blur\n blurMode = p.blurMode\n\n const [closed, setClosed] = useState(!open)\n placement = placement || \"bottom-left\"\n const blurCss = blur ? useBlurCss(blur, blurMode) : {}\n\n useEffect(() => {\n if (closed && open) {\n setClosed(false)\n }\n }, [open])\n\n if (closed) return <></>\n let duration = slotProps?.transition?.duration || 300\n let delay = slotProps?.transition?.delay || 0\n\n let content = <Transition\n duration={duration}\n delay={delay}\n easing=\"standard\"\n variant={transition || \"zoomOver\"}\n {...slotProps?.transition}\n open={open}\n onOpen={onOpen}\n onOpened={onOpened}\n onClose={onClose}\n onClosed={() => {\n setClosed(true)\n onClosed && onClosed()\n }}\n >\n {children}\n </Transition>\n\n return (\n <Transition\n duration={duration}\n delay={delay}\n easing=\"smooth\"\n variant={\"fade\"}\n open={open}\n >\n <Tag\n baseClass=\"layer\"\n {...slotProps?.root}\n sxr={{\n ...slotProps?.root?.sx,\n position: \"fixed\",\n zIndex: 1500 + (zIndex || 0),\n top: 0,\n left: 0,\n bottom: 0,\n right: 0,\n width: \"100%\",\n height: \"100%\",\n ...blurCss\n }}\n >\n {\n onClickOutside ? <ClickOutside\n {...slotProps?.clickOutside}\n onClickOutside={onClickOutside || (() => { })}\n >\n {content}\n </ClickOutside> : content\n }\n </Tag>\n </Transition>\n )\n}\n\n\nLayer.open = (children: LayerProps['children'], props?: Partial<Omit<LayerProps, 'children'>>) => {\n const l = Renderar.render(Layer as any, {\n open: true,\n ...props,\n children,\n onClosed: () => {\n Renderar.unrender(Layer as any)\n if (props?.onClosed) {\n props.onClosed()\n }\n }\n })\n return {\n open: () => {\n l.updateProps({ open: true })\n },\n close: () => {\n l.updateProps({ open: false })\n },\n }\n}\nLayer.close = () => {\n Renderar.unrender(Layer as any)\n}\nexport default Layer"],"names":[],"mappings":";;;;;;;;AA2BA;;;AACI;;AAeA;AAAU;AACV;AAAc;AACd;AAEA;AACA;;AAGA;AACA;;AAGI;;;AAGJ;AAEA;AAAY;AACZ;AACA;;;;;AAoBA;AAmCJ;AAGA;AACI;AAKQ;;;;AAIJ;;;;;;;;;AAUR;AACA;AACI;AACJ;;"}
|
package/package.json
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@xanui/ui",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.20",
|
|
4
4
|
"description": "",
|
|
5
5
|
"private": false,
|
|
6
6
|
"main": "./index.js",
|
|
7
7
|
"module": "./index.mjs",
|
|
8
8
|
"types": "./index.d.ts",
|
|
9
9
|
"dependencies": {
|
|
10
|
-
"@xanui/core": "^1.2.
|
|
10
|
+
"@xanui/core": "^1.2.37",
|
|
11
11
|
"@xanui/icons": "^1.1.10",
|
|
12
12
|
"pretty-class": "^1.0.8",
|
|
13
13
|
"react-state-bucket": "^1.2.6"
|
package/useModal/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import { UseLayerProps } from '../useLayer/index.js';
|
|
|
2
2
|
import { TagProps } from '@xanui/core';
|
|
3
3
|
|
|
4
4
|
type UseModalProps = Omit<UseLayerProps, "slotProps"> & {
|
|
5
|
-
size?: "xs" | "sm" | "md" | "lg" | "xl" | "
|
|
5
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl" | "full" | number;
|
|
6
6
|
slotProps?: {
|
|
7
7
|
layer?: UseLayerProps['slotProps'];
|
|
8
8
|
root?: Omit<TagProps<'div'>, "children">;
|
package/useModal/index.js
CHANGED
|
@@ -7,16 +7,16 @@ var index = require('../useLayer/index.js');
|
|
|
7
7
|
var core = require('@xanui/core');
|
|
8
8
|
|
|
9
9
|
const useModal = (children, props) => {
|
|
10
|
-
var _a;
|
|
10
|
+
var _a, _b;
|
|
11
11
|
let sizes = {
|
|
12
12
|
xs: 420,
|
|
13
13
|
sm: 760,
|
|
14
14
|
md: 990,
|
|
15
15
|
lg: 1120,
|
|
16
16
|
xl: 1300,
|
|
17
|
-
|
|
17
|
+
full: "100%"
|
|
18
18
|
};
|
|
19
|
-
let
|
|
19
|
+
let _c = props || {}, { size, slotProps } = _c, useLayerProps = tslib.__rest(_c, ["size", "slotProps"]);
|
|
20
20
|
size = size !== null && size !== void 0 ? size : "xs";
|
|
21
21
|
slotProps = slotProps || {};
|
|
22
22
|
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
@@ -29,7 +29,7 @@ const useModal = (children, props) => {
|
|
|
29
29
|
else {
|
|
30
30
|
layer.close();
|
|
31
31
|
}
|
|
32
|
-
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (
|
|
32
|
+
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }) }));
|
|
33
33
|
return layer;
|
|
34
34
|
};
|
|
35
35
|
|
package/useModal/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n slotProps?: {\n layer?: UseLayerProps['slotProps'];\n root?: Omit<TagProps<'div'>, \"children\">\n }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n open: () => void;\n close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n let sizes: any = {\n xs: 420,\n sm: 760,\n md: 990,\n lg: 1120,\n xl: 1300,\n full: \"100%\"\n }\n let { size, slotProps, ...useLayerProps } = props || {}\n size = size ?? \"xs\"\n slotProps = slotProps || {} as any\n const root: any = slotProps?.root || {}\n\n const layer = useLayer(() => {\n return (\n <Tag\n {...root}\n sxr={{\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n radius: 2,\n bgcolor: \"background.primary\",\n shadow: 15,\n ...root?.sx\n }}\n baseClass='modal'\n >\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n </Tag>\n )\n }, {\n ...useLayerProps,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n layer.close()\n }\n },\n slotProps: {\n ...slotProps?.layer,\n clickOutside: {\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n ...slotProps?.layer?.clickOutside,\n },\n root: {\n display: \"flex\",\n alignItems: 'center',\n justifyContent: \"center\",\n ...slotProps?.layer?.root,\n }\n }\n })\n\n return layer\n}\n\nexport default useModal;"],"names":[],"mappings":";;;;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|
package/useModal/index.mjs
CHANGED
|
@@ -5,16 +5,16 @@ import useLayer from '../useLayer/index.mjs';
|
|
|
5
5
|
import { Tag } from '@xanui/core';
|
|
6
6
|
|
|
7
7
|
const useModal = (children, props) => {
|
|
8
|
-
var _a;
|
|
8
|
+
var _a, _b;
|
|
9
9
|
let sizes = {
|
|
10
10
|
xs: 420,
|
|
11
11
|
sm: 760,
|
|
12
12
|
md: 990,
|
|
13
13
|
lg: 1120,
|
|
14
14
|
xl: 1300,
|
|
15
|
-
|
|
15
|
+
full: "100%"
|
|
16
16
|
};
|
|
17
|
-
let
|
|
17
|
+
let _c = props || {}, { size, slotProps } = _c, useLayerProps = __rest(_c, ["size", "slotProps"]);
|
|
18
18
|
size = size !== null && size !== void 0 ? size : "xs";
|
|
19
19
|
slotProps = slotProps || {};
|
|
20
20
|
const root = (slotProps === null || slotProps === void 0 ? void 0 : slotProps.root) || {};
|
|
@@ -27,7 +27,7 @@ const useModal = (children, props) => {
|
|
|
27
27
|
else {
|
|
28
28
|
layer.close();
|
|
29
29
|
}
|
|
30
|
-
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (
|
|
30
|
+
}, slotProps: Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer), { clickOutside: Object.assign({ maxWidth: sizes[size] || size, width: "100%" }, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _a === void 0 ? void 0 : _a.clickOutside), root: Object.assign({ display: "flex", alignItems: 'center', justifyContent: "center" }, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.layer) === null || _b === void 0 ? void 0 : _b.root) }) }));
|
|
31
31
|
return layer;
|
|
32
32
|
};
|
|
33
33
|
|
package/useModal/index.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../src/useModal/index.tsx"],"sourcesContent":["\"use client\";\n\nimport useLayer, { UseLayerProps } from \"../useLayer\";\nimport { Tag, TagProps } from '@xanui/core'\n\nexport type UseModalProps = Omit<UseLayerProps, \"slotProps\"> & {\n size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\" | number;\n slotProps?: {\n layer?: UseLayerProps['slotProps'];\n root?: Omit<TagProps<'div'>, \"children\">\n }\n}\n\nexport type UseModalChildren = React.ReactElement | ((props: UseModalReturn) => React.ReactElement)\n\nexport type UseModalReturn = {\n open: () => void;\n close: () => void;\n}\n\nconst useModal = (children: UseModalChildren, props?: UseModalProps) => {\n\n let sizes: any = {\n xs: 420,\n sm: 760,\n md: 990,\n lg: 1120,\n xl: 1300,\n full: \"100%\"\n }\n let { size, slotProps, ...useLayerProps } = props || {}\n size = size ?? \"xs\"\n slotProps = slotProps || {} as any\n const root: any = slotProps?.root || {}\n\n const layer = useLayer(() => {\n return (\n <Tag\n {...root}\n sxr={{\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n radius: 2,\n bgcolor: \"background.primary\",\n shadow: 15,\n ...root?.sx\n }}\n baseClass='modal'\n >\n {typeof children === \"function\" ? children({ open: layer.open, close: layer.close }) : children}\n </Tag>\n )\n }, {\n ...useLayerProps,\n onClickOutside: () => {\n if (props?.onClickOutside) {\n props.onClickOutside()\n } else {\n layer.close()\n }\n },\n slotProps: {\n ...slotProps?.layer,\n clickOutside: {\n maxWidth: sizes[size as any] || size,\n width: \"100%\",\n ...slotProps?.layer?.clickOutside,\n },\n root: {\n display: \"flex\",\n alignItems: 'center',\n justifyContent: \"center\",\n ...slotProps?.layer?.root,\n }\n }\n })\n\n return layer\n}\n\nexport default useModal;"],"names":[],"mappings":";;;;;;AAoBA;;AAEG;AACG;AACA;AACA;AACA;AACA;AACA;;AAEH;;AAEA;AACA;AAEA;AACG;AAgBH;;;;;;;AAQG;AAiBH;AACH;;"}
|