@xanui/ui 1.1.35 → 1.1.37
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/DataFilter/index.js +3 -3
- package/package.json +4 -4
- package/Accordion/index.mjs +0 -94
- package/Accordion/index.mjs.map +0 -1
- package/Alert/index.mjs +0 -119
- package/Alert/index.mjs.map +0 -1
- package/Autocomplete/index.mjs +0 -134
- package/Autocomplete/index.mjs.map +0 -1
- package/Avatar/index.mjs +0 -48
- package/Avatar/index.mjs.map +0 -1
- package/Badge/index.mjs +0 -107
- package/Badge/index.mjs.map +0 -1
- package/Box/index.mjs +0 -12
- package/Box/index.mjs.map +0 -1
- package/Button/index.mjs +0 -92
- package/Button/index.mjs.map +0 -1
- package/ButtonGroup/index.mjs +0 -56
- package/ButtonGroup/index.mjs.map +0 -1
- package/Calendar/index.mjs +0 -172
- package/Calendar/index.mjs.map +0 -1
- package/CalendarInput/index.mjs +0 -32
- package/CalendarInput/index.mjs.map +0 -1
- package/Checkbox/index.mjs +0 -56
- package/Checkbox/index.mjs.map +0 -1
- package/Chip/index.mjs +0 -74
- package/Chip/index.mjs.map +0 -1
- package/CircleProgress/index.mjs +0 -127
- package/CircleProgress/index.mjs.map +0 -1
- package/ClickOutside/index.mjs +0 -35
- package/ClickOutside/index.mjs.map +0 -1
- package/Collaps/index.mjs +0 -24
- package/Collaps/index.mjs.map +0 -1
- package/Container/index.mjs +0 -27
- package/Container/index.mjs.map +0 -1
- package/DataFilter/index.mjs +0 -67
- package/DataFilter/index.mjs.map +0 -1
- package/DataFilter/options/DateFilter.mjs +0 -30
- package/DataFilter/options/DateFilter.mjs.map +0 -1
- package/DataFilter/options/DateRangeFilter.mjs +0 -25
- package/DataFilter/options/DateRangeFilter.mjs.map +0 -1
- package/DataFilter/options/MultiSelectFilter.mjs +0 -36
- package/DataFilter/options/MultiSelectFilter.mjs.map +0 -1
- package/DataFilter/options/NumberFilter.mjs +0 -22
- package/DataFilter/options/NumberFilter.mjs.map +0 -1
- package/DataFilter/options/NumberRangeFilter.mjs +0 -27
- package/DataFilter/options/NumberRangeFilter.mjs.map +0 -1
- package/DataFilter/options/SelectFilter.mjs +0 -32
- package/DataFilter/options/SelectFilter.mjs.map +0 -1
- package/DataFilter/options/TextFilter.mjs +0 -22
- package/DataFilter/options/TextFilter.mjs.map +0 -1
- package/Datatable/FilterBox.mjs +0 -37
- package/Datatable/FilterBox.mjs.map +0 -1
- package/Datatable/Row.mjs +0 -57
- package/Datatable/Row.mjs.map +0 -1
- package/Datatable/SelectedBox.mjs +0 -19
- package/Datatable/SelectedBox.mjs.map +0 -1
- package/Datatable/Table.mjs +0 -21
- package/Datatable/Table.mjs.map +0 -1
- package/Datatable/TableHead.mjs +0 -59
- package/Datatable/TableHead.mjs.map +0 -1
- package/Datatable/index.mjs +0 -91
- package/Datatable/index.mjs.map +0 -1
- package/Divider/index.mjs +0 -29
- package/Divider/index.mjs.map +0 -1
- package/Drawer/index.mjs +0 -76
- package/Drawer/index.mjs.map +0 -1
- package/Form/index.mjs +0 -43
- package/Form/index.mjs.map +0 -1
- package/GridContainer/index.mjs +0 -17
- package/GridContainer/index.mjs.map +0 -1
- package/GridItem/index.mjs +0 -18
- package/GridItem/index.mjs.map +0 -1
- package/IconButton/index.mjs +0 -62
- package/IconButton/index.mjs.map +0 -1
- package/Image/index.mjs +0 -25
- package/Image/index.mjs.map +0 -1
- package/Input/index.mjs +0 -142
- package/Input/index.mjs.map +0 -1
- package/InputNumber/index.mjs +0 -30
- package/InputNumber/index.mjs.map +0 -1
- package/Label/index.mjs +0 -22
- package/Label/index.mjs.map +0 -1
- package/Layer/index.mjs +0 -60
- package/Layer/index.mjs.map +0 -1
- package/LineProgress/index.mjs +0 -57
- package/LineProgress/index.mjs.map +0 -1
- package/List/ListContext.mjs +0 -8
- package/List/ListContext.mjs.map +0 -1
- package/List/index.mjs +0 -61
- package/List/index.mjs.map +0 -1
- package/ListItem/index.mjs +0 -52
- package/ListItem/index.mjs.map +0 -1
- package/LoadingBox/index.mjs +0 -30
- package/LoadingBox/index.mjs.map +0 -1
- package/Menu/index.mjs +0 -148
- package/Menu/index.mjs.map +0 -1
- package/Modal/index.mjs +0 -57
- package/Modal/index.mjs.map +0 -1
- package/NoSSR/index.mjs +0 -13
- package/NoSSR/index.mjs.map +0 -1
- package/Option/index.mjs +0 -12
- package/Option/index.mjs.map +0 -1
- package/Paper/index.mjs +0 -13
- package/Paper/index.mjs.map +0 -1
- package/Portal/index.mjs +0 -25
- package/Portal/index.mjs.map +0 -1
- package/Radio/index.mjs +0 -14
- package/Radio/index.mjs.map +0 -1
- package/Scrollbar/index.mjs +0 -57
- package/Scrollbar/index.mjs.map +0 -1
- package/Select/index.mjs +0 -57
- package/Select/index.mjs.map +0 -1
- package/Skeleton/index.mjs +0 -58
- package/Skeleton/index.mjs.map +0 -1
- package/Stack/index.mjs +0 -15
- package/Stack/index.mjs.map +0 -1
- package/Switch/index.mjs +0 -77
- package/Switch/index.mjs.map +0 -1
- package/Tab/index.mjs +0 -15
- package/Tab/index.mjs.map +0 -1
- package/Table/index.mjs +0 -86
- package/Table/index.mjs.map +0 -1
- package/TableBody/index.mjs +0 -12
- package/TableBody/index.mjs.map +0 -1
- package/TableCell/index.mjs +0 -12
- package/TableCell/index.mjs.map +0 -1
- package/TableFooter/index.mjs +0 -12
- package/TableFooter/index.mjs.map +0 -1
- package/TableHead/index.mjs +0 -12
- package/TableHead/index.mjs.map +0 -1
- package/TablePagination/index.mjs +0 -57
- package/TablePagination/index.mjs.map +0 -1
- package/TableRow/index.mjs +0 -12
- package/TableRow/index.mjs.map +0 -1
- package/Tabs/index.mjs +0 -199
- package/Tabs/index.mjs.map +0 -1
- package/Text/index.mjs +0 -23
- package/Text/index.mjs.map +0 -1
- package/Toast/index.mjs +0 -118
- package/Toast/index.mjs.map +0 -1
- package/Tooltip/index.mjs +0 -38
- package/Tooltip/index.mjs.map +0 -1
- package/ViewBox/index.mjs +0 -30
- package/ViewBox/index.mjs.map +0 -1
- package/index.mjs +0 -65
- package/index.mjs.map +0 -1
- package/useAlert/index.mjs +0 -92
- package/useAlert/index.mjs.map +0 -1
- package/useBlurCss/index.mjs +0 -17
- package/useBlurCss/index.mjs.map +0 -1
- package/useCorner/index.mjs +0 -20
- package/useCorner/index.mjs.map +0 -1
- package/useLayer/index.mjs +0 -36
- package/useLayer/index.mjs.map +0 -1
- package/useModal/index.mjs +0 -35
- package/useModal/index.mjs.map +0 -1
package/Tabs/index.mjs
DELETED
|
@@ -1,199 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
-
import React, { useRef, useState, useMemo, Children, cloneElement, useEffect } from 'react';
|
|
5
|
-
import { useInterface, useBreakpointProps, Tag, Transition } from '@xanui/core';
|
|
6
|
-
|
|
7
|
-
const getRect = (ele, parent) => {
|
|
8
|
-
const _rect = {};
|
|
9
|
-
const parentRect = parent.getBoundingClientRect();
|
|
10
|
-
const childRect = ele.getBoundingClientRect();
|
|
11
|
-
_rect.top = childRect.top - parentRect.top;
|
|
12
|
-
_rect.right = childRect.right - parentRect.right;
|
|
13
|
-
_rect.bottom = childRect.bottom - parentRect.bottom;
|
|
14
|
-
_rect.left = childRect.left - parentRect.left;
|
|
15
|
-
_rect.width = childRect.width;
|
|
16
|
-
_rect.height = childRect.height;
|
|
17
|
-
return _rect;
|
|
18
|
-
};
|
|
19
|
-
const Tabs = React.forwardRef((_a, ref) => {
|
|
20
|
-
var _b, _c, _d;
|
|
21
|
-
var { onChange, value, children } = _a, props = __rest(_a, ["onChange", "value", "children"]);
|
|
22
|
-
let [_e] = useInterface("Tabs", props, {}), { verticle, color, variant, indicatorSize, disableTransition, slotProps } = _e, rest = __rest(_e, ["verticle", "color", "variant", "indicatorSize", "disableTransition", "slotProps"]);
|
|
23
|
-
const _p = {};
|
|
24
|
-
if (variant)
|
|
25
|
-
_p.variant = variant;
|
|
26
|
-
if (color)
|
|
27
|
-
_p.color = color;
|
|
28
|
-
if (verticle)
|
|
29
|
-
_p.verticle = verticle;
|
|
30
|
-
if (disableTransition)
|
|
31
|
-
_p.disableTransition = disableTransition;
|
|
32
|
-
if (indicatorSize)
|
|
33
|
-
_p.indicatorSize = indicatorSize;
|
|
34
|
-
const p = useBreakpointProps(_p);
|
|
35
|
-
variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "end-line";
|
|
36
|
-
color = (_c = p.color) !== null && _c !== void 0 ? _c : "brand";
|
|
37
|
-
verticle = p.verticle;
|
|
38
|
-
disableTransition = p.disableTransition;
|
|
39
|
-
indicatorSize = (_d = p.indicatorSize) !== null && _d !== void 0 ? _d : 3;
|
|
40
|
-
ref = ref || useRef(null);
|
|
41
|
-
const containerRef = useRef(null);
|
|
42
|
-
const [trans, setTrans] = useState();
|
|
43
|
-
const { childs, selectedIndex } = useMemo(() => {
|
|
44
|
-
let info = {
|
|
45
|
-
childs: null,
|
|
46
|
-
selectedIndex: 0
|
|
47
|
-
};
|
|
48
|
-
info.childs = Children.map(children, (child, idx) => {
|
|
49
|
-
let selected = child.props.value === value;
|
|
50
|
-
if (selected) {
|
|
51
|
-
info.selectedIndex = idx;
|
|
52
|
-
}
|
|
53
|
-
let btnProps = {};
|
|
54
|
-
if (variant === 'fill' && selected) {
|
|
55
|
-
btnProps = {
|
|
56
|
-
sx: {
|
|
57
|
-
bgcolor: "transparent!importnat",
|
|
58
|
-
color: "#FFFFFF!important"
|
|
59
|
-
}
|
|
60
|
-
};
|
|
61
|
-
}
|
|
62
|
-
else if (variant === 'soft' && selected) {
|
|
63
|
-
btnProps = {
|
|
64
|
-
sx: {
|
|
65
|
-
bgcolor: "transparent!importnat",
|
|
66
|
-
}
|
|
67
|
-
};
|
|
68
|
-
}
|
|
69
|
-
// delete child.props.value
|
|
70
|
-
return cloneElement(child, Object.assign(Object.assign(Object.assign({ corner: "square", value: undefined, onClick: () => {
|
|
71
|
-
onChange && onChange(child.props.value);
|
|
72
|
-
} }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.button), btnProps), { color: selected ? color : "default", variant: "text", classNames: [child.props.classNames, { "tab-selected": selected }] }));
|
|
73
|
-
});
|
|
74
|
-
return info;
|
|
75
|
-
}, [children, onChange, value, variant, color, verticle]);
|
|
76
|
-
useEffect(() => {
|
|
77
|
-
let con = containerRef.current;
|
|
78
|
-
const conChilds = con.children;
|
|
79
|
-
if (conChilds && conChilds[selectedIndex]) {
|
|
80
|
-
const selectedTab = con.querySelector(".tab-selected") || conChilds[0];
|
|
81
|
-
const prevRect = getRect(selectedTab, con);
|
|
82
|
-
const rect = getRect(conChilds[selectedIndex], con);
|
|
83
|
-
let anim = () => ({});
|
|
84
|
-
if (verticle) {
|
|
85
|
-
let v = {
|
|
86
|
-
from: {
|
|
87
|
-
top: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.top) || 0,
|
|
88
|
-
height: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0,
|
|
89
|
-
},
|
|
90
|
-
to: {
|
|
91
|
-
top: (rect === null || rect === void 0 ? void 0 : rect.top) || 0,
|
|
92
|
-
height: (rect === null || rect === void 0 ? void 0 : rect.height) || 0,
|
|
93
|
-
}
|
|
94
|
-
};
|
|
95
|
-
if (["fill", "soft", "outline"].includes(variant)) {
|
|
96
|
-
v.from.width = prevRect === null || prevRect === void 0 ? void 0 : prevRect.width;
|
|
97
|
-
v.to.width = rect === null || rect === void 0 ? void 0 : rect.width;
|
|
98
|
-
}
|
|
99
|
-
anim = () => v;
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
let v = {
|
|
103
|
-
from: {
|
|
104
|
-
left: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.left) || 0,
|
|
105
|
-
width: (prevRect === null || prevRect === void 0 ? void 0 : prevRect.width) || 0,
|
|
106
|
-
},
|
|
107
|
-
to: {
|
|
108
|
-
left: (rect === null || rect === void 0 ? void 0 : rect.left) || 0,
|
|
109
|
-
width: (rect === null || rect === void 0 ? void 0 : rect.width) || 0,
|
|
110
|
-
},
|
|
111
|
-
};
|
|
112
|
-
if (["fill", "soft", "outline"].includes(variant)) {
|
|
113
|
-
v.from.height = (prevRect === null || prevRect === void 0 ? void 0 : prevRect.height) || 0;
|
|
114
|
-
v.to.height = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
|
|
115
|
-
}
|
|
116
|
-
anim = () => v;
|
|
117
|
-
}
|
|
118
|
-
setTrans(() => anim);
|
|
119
|
-
}
|
|
120
|
-
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
121
|
-
}, [selectedIndex, variant, color, verticle]);
|
|
122
|
-
let indicatorProps = useMemo(() => {
|
|
123
|
-
let _indicatorProps = {};
|
|
124
|
-
switch (variant) {
|
|
125
|
-
case "start-line":
|
|
126
|
-
if (verticle) {
|
|
127
|
-
_indicatorProps = {
|
|
128
|
-
left: 0,
|
|
129
|
-
width: indicatorSize
|
|
130
|
-
};
|
|
131
|
-
}
|
|
132
|
-
else {
|
|
133
|
-
_indicatorProps = {
|
|
134
|
-
top: 0,
|
|
135
|
-
height: indicatorSize
|
|
136
|
-
};
|
|
137
|
-
}
|
|
138
|
-
break;
|
|
139
|
-
case "end-line":
|
|
140
|
-
if (verticle) {
|
|
141
|
-
_indicatorProps = {
|
|
142
|
-
right: 0,
|
|
143
|
-
width: indicatorSize
|
|
144
|
-
};
|
|
145
|
-
}
|
|
146
|
-
else {
|
|
147
|
-
_indicatorProps = {
|
|
148
|
-
bottom: 0,
|
|
149
|
-
height: indicatorSize
|
|
150
|
-
};
|
|
151
|
-
}
|
|
152
|
-
break;
|
|
153
|
-
case "fill":
|
|
154
|
-
_indicatorProps = {
|
|
155
|
-
top: 0,
|
|
156
|
-
bgcolor: color
|
|
157
|
-
};
|
|
158
|
-
break;
|
|
159
|
-
case "outline":
|
|
160
|
-
_indicatorProps = {
|
|
161
|
-
top: 0,
|
|
162
|
-
border: "1px solid",
|
|
163
|
-
borderColor: color,
|
|
164
|
-
bgcolor: "transparent"
|
|
165
|
-
};
|
|
166
|
-
break;
|
|
167
|
-
case "soft":
|
|
168
|
-
_indicatorProps = {
|
|
169
|
-
top: 0,
|
|
170
|
-
bgcolor: `${color}.soft.primary`
|
|
171
|
-
};
|
|
172
|
-
break;
|
|
173
|
-
case "text":
|
|
174
|
-
_indicatorProps = {
|
|
175
|
-
display: "none"
|
|
176
|
-
};
|
|
177
|
-
break;
|
|
178
|
-
}
|
|
179
|
-
return _indicatorProps;
|
|
180
|
-
}, [selectedIndex, variant, color, verticle]);
|
|
181
|
-
return (jsxs(Tag, Object.assign({}, rest, { baseClass: 'tabs', ref: ref, sxr: {
|
|
182
|
-
position: "relative",
|
|
183
|
-
zIndex: 1,
|
|
184
|
-
display: "inline-block"
|
|
185
|
-
}, children: [jsx(Tag, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.content, { baseClass: 'tabs-content', sxr: {
|
|
186
|
-
display: verticle ? "flex" : "inline-flex",
|
|
187
|
-
flexDirection: verticle ? "column" : "row",
|
|
188
|
-
}, ref: containerRef, children: childs })), jsx(Transition, { open: !!trans, variant: trans, duration: trans ? (disableTransition ? 0 : 250) : 0, easing: "smooth", children: jsx(Tag, Object.assign({ baseClass: 'tabs-indicator',
|
|
189
|
-
// className={classname}
|
|
190
|
-
sxr: {
|
|
191
|
-
position: "absolute",
|
|
192
|
-
zIndex: -1,
|
|
193
|
-
cursor: "pointer",
|
|
194
|
-
bgcolor: color
|
|
195
|
-
} }, indicatorProps)) })] })));
|
|
196
|
-
});
|
|
197
|
-
|
|
198
|
-
export { Tabs as default };
|
|
199
|
-
//# sourceMappingURL=index.mjs.map
|
package/Tabs/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\r\nimport { TabProps } from '../Tab'\r\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\r\nimport { ButtonProps } from '../Button'\r\n\r\n\r\ntype ValueType = string | number\r\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\r\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\r\n value?: ValueType;\r\n onChange?: (value: ValueType) => void;\r\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n verticle?: useBreakpointPropsType<boolean>;\r\n disableTransition?: useBreakpointPropsType<boolean>;\r\n indicatorSize?: useBreakpointPropsType<number>;\r\n\r\n slotProps?: {\r\n content?: Omit<TagProps, \"children\">;\r\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\r\n }\r\n}\r\n\r\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\r\n const _rect: any = {};\r\n const parentRect = parent.getBoundingClientRect();\r\n const childRect = ele.getBoundingClientRect();\r\n _rect.top = childRect.top - parentRect.top;\r\n _rect.right = childRect.right - parentRect.right;\r\n _rect.bottom = childRect.bottom - parentRect.bottom;\r\n _rect.left = childRect.left - parentRect.left;\r\n _rect.width = childRect.width;\r\n _rect.height = childRect.height;\r\n return _rect\r\n}\r\n\r\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\r\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n if (color) _p.color = color\r\n if (verticle) _p.verticle = verticle\r\n if (disableTransition) _p.disableTransition = disableTransition\r\n if (indicatorSize) _p.indicatorSize = indicatorSize\r\n const p: any = useBreakpointProps(_p)\r\n\r\n variant = p.variant ?? \"end-line\"\r\n color = p.color ?? \"brand\"\r\n verticle = p.verticle\r\n disableTransition = p.disableTransition\r\n indicatorSize = p.indicatorSize ?? 3\r\n\r\n ref = ref || useRef(null)\r\n const containerRef: any = useRef(null)\r\n const [trans, setTrans] = useState<any>()\r\n\r\n const { childs, selectedIndex } = useMemo(() => {\r\n let info: any = {\r\n childs: null,\r\n selectedIndex: 0\r\n }\r\n info.childs = Children.map(children, (child: any, idx: number) => {\r\n let selected = child.props.value === value\r\n if (selected) {\r\n info.selectedIndex = idx\r\n }\r\n\r\n let btnProps: any = {}\r\n if (variant === 'fill' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n color: \"#FFFFFF!important\"\r\n }\r\n }\r\n } else if (variant === 'soft' && selected) {\r\n btnProps = {\r\n sx: {\r\n bgcolor: \"transparent!importnat\",\r\n }\r\n }\r\n }\r\n\r\n // delete child.props.value\r\n return cloneElement(child, {\r\n corner: \"square\",\r\n value: undefined,\r\n onClick: () => {\r\n onChange && onChange(child.props.value)\r\n },\r\n ...slotProps?.button,\r\n ...btnProps,\r\n color: selected ? color : \"default\",\r\n variant: \"text\",\r\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\r\n })\r\n })\r\n return info\r\n }, [children, onChange, value, variant, color, verticle])\r\n\r\n useEffect(() => {\r\n let con = containerRef.current\r\n const conChilds = con.children\r\n if (conChilds && conChilds[selectedIndex]) {\r\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\r\n const prevRect = getRect(selectedTab, con)\r\n const rect = getRect(conChilds[selectedIndex], con)\r\n\r\n let anim: any = () => ({})\r\n if (verticle) {\r\n let v: any = {\r\n from: {\r\n top: prevRect?.top || 0,\r\n height: prevRect?.height || 0,\r\n },\r\n to: {\r\n top: rect?.top || 0,\r\n height: rect?.height || 0,\r\n }\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.width = prevRect?.width\r\n v.to.width = rect?.width\r\n }\r\n anim = () => v\r\n } else {\r\n let v: any = {\r\n from: {\r\n left: prevRect?.left || 0,\r\n width: prevRect?.width || 0,\r\n },\r\n to: {\r\n left: rect?.left || 0,\r\n width: rect?.width || 0,\r\n },\r\n }\r\n\r\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\r\n v.from.height = prevRect?.height || 0\r\n v.to.height = rect?.height || 0\r\n }\r\n anim = () => v\r\n }\r\n setTrans(() => anim)\r\n }\r\n // eslint-disable-next-line react-hooks/exhaustive-deps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n let indicatorProps: any = useMemo(() => {\r\n let _indicatorProps: any = {}\r\n switch (variant) {\r\n case \"start-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n left: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n top: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"end-line\":\r\n if (verticle) {\r\n _indicatorProps = {\r\n right: 0,\r\n width: indicatorSize\r\n }\r\n } else {\r\n _indicatorProps = {\r\n bottom: 0,\r\n height: indicatorSize\r\n }\r\n }\r\n break;\r\n case \"fill\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: color\r\n }\r\n break;\r\n case \"outline\":\r\n _indicatorProps = {\r\n top: 0,\r\n border: \"1px solid\",\r\n borderColor: color,\r\n bgcolor: \"transparent\"\r\n }\r\n break;\r\n case \"soft\":\r\n _indicatorProps = {\r\n top: 0,\r\n bgcolor: `${color}.soft.primary`\r\n }\r\n break;\r\n case \"text\":\r\n _indicatorProps = {\r\n display: \"none\"\r\n }\r\n break;\r\n }\r\n return _indicatorProps\r\n }, [selectedIndex, variant, color, verticle])\r\n\r\n return (\r\n <Tag\r\n {...rest}\r\n baseClass='tabs'\r\n ref={ref}\r\n sxr={{\r\n position: \"relative\",\r\n zIndex: 1,\r\n display: \"inline-block\"\r\n }}\r\n >\r\n <Tag\r\n {...slotProps?.content}\r\n baseClass='tabs-content'\r\n sxr={{\r\n display: verticle ? \"flex\" : \"inline-flex\",\r\n flexDirection: verticle ? \"column\" : \"row\",\r\n }}\r\n ref={containerRef}\r\n >\r\n {childs}\r\n </Tag>\r\n <Transition\r\n open={!!trans}\r\n variant={trans}\r\n duration={trans ? (disableTransition ? 0 : 250) : 0}\r\n easing=\"smooth\"\r\n >\r\n <Tag\r\n baseClass='tabs-indicator'\r\n // className={classname}\r\n sxr={{\r\n position: \"absolute\",\r\n zIndex: -1,\r\n cursor: \"pointer\",\r\n bgcolor: color\r\n }}\r\n {...indicatorProps}\r\n >\r\n </Tag>\r\n </Transition>\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default Tabs"],"names":[],"mappings":";;;;;;AAyBA;;AAEI;AACA;;;;;AAKA;AACA;AACA;AACJ;AAEA;;;AACI;;AAEA;AAAa;AACb;AAAW;AACX;AAAc;AACd;AAAuB;AACvB;AAAmB;AACnB;AAEA;AACA;AACA;AACA;AACA;AAEA;AACA;;;AAII;AACI;AACA;;AAEJ;;;AAGQ;;;AAIJ;AACI;AACI;AACI;AACA;AACH;;;AAEF;AACH;AACI;AACI;AACH;;;;AAKT;;AAKI;AAOR;AACA;AACJ;;AAGI;AACA;AACA;AACI;;;;;AAMI;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;;AAEA;AACI;;;AAGC;AACD;;;AAGC;;AAGL;AACI;AACA;;AAEJ;;AAEJ;;;;AAKR;;;AAGQ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;;AAEQ;AACI;AACA;;;;AAGJ;AACI;AACA;;;;AAIZ;AACI;AACI;AACA;;;AAGR;AACI;AACI;AACA;AACA;AACA;;;AAGR;AACI;AACI;;;;AAIR;AACI;AACI;;;;AAIZ;;AAGJ;AAMY;AACA;AACA;AACH;;;;;AAsBO;AACI;;AAEA;AACA;AACH;AAOrB;;"}
|
package/Text/index.mjs
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import { useBreakpointProps, Tag } from '@xanui/core';
|
|
5
|
-
|
|
6
|
-
const Text = React.forwardRef((_a, ref) => {
|
|
7
|
-
var _b;
|
|
8
|
-
var { children, variant } = _a, props = __rest(_a, ["children", "variant"]);
|
|
9
|
-
const _p = {};
|
|
10
|
-
if (variant)
|
|
11
|
-
_p.variant = variant;
|
|
12
|
-
const p = useBreakpointProps(_p);
|
|
13
|
-
variant = (_b = p.variant) !== null && _b !== void 0 ? _b : 'text';
|
|
14
|
-
return (jsx(Tag, Object.assign({ component: variant.startsWith('h') ? variant : "p" }, props, { sxr: {
|
|
15
|
-
fontSize: variant,
|
|
16
|
-
lineHeight: variant,
|
|
17
|
-
fontWeight: variant,
|
|
18
|
-
color: "text.primary",
|
|
19
|
-
}, baseClass: 'text', ref: ref, children: children })));
|
|
20
|
-
});
|
|
21
|
-
|
|
22
|
-
export { Text as default };
|
|
23
|
-
//# sourceMappingURL=index.mjs.map
|
package/Text/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\r\nimport React from 'react';\r\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\r\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\r\n}\r\n\r\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\r\n const _p: any = {}\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n variant = p.variant ?? 'text'\r\n\r\n return (\r\n <Tag\r\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\r\n {...props}\r\n sxr={{\r\n fontSize: variant,\r\n lineHeight: variant,\r\n fontWeight: variant,\r\n color: \"text.primary\",\r\n }}\r\n baseClass='text'\r\n ref={ref}\r\n >{children}</Tag>\r\n )\r\n})\r\n\r\nexport default Text\r\n"],"names":["_jsx"],"mappings":";;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAA,MAAA,CAAA,EAAA,EAA7B,uBAA+B,CAAF;IAC1F,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,OAAO;AAAE,QAAA,EAAE,CAAC,OAAO,GAAG,OAAO;AACjC,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAG,OAAkB,CAAC,UAAU,CAAC,GAAG,CAAC,GAAG,OAAc,GAAG,GAAG,EAAA,EACjE,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,QAAQ,EAAE,OAAO;AACjB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,UAAU,EAAE,OAAO;AACnB,YAAA,KAAK,EAAE,cAAc;SACxB,EACD,SAAS,EAAC,MAAM,EAChB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/Toast/index.mjs
DELETED
|
@@ -1,118 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { createRoot } from 'react-dom/client';
|
|
5
|
-
import { appRootElement, Transition } from '@xanui/core';
|
|
6
|
-
import React from 'react';
|
|
7
|
-
import Alert from '../Alert/index.mjs';
|
|
8
|
-
import Scrollbar from '../Scrollbar/index.mjs';
|
|
9
|
-
|
|
10
|
-
const formatPacement = (placement) => {
|
|
11
|
-
let sx = {};
|
|
12
|
-
let transition = "";
|
|
13
|
-
switch (placement) {
|
|
14
|
-
case "top-left":
|
|
15
|
-
sx = {
|
|
16
|
-
top: 0,
|
|
17
|
-
left: 0
|
|
18
|
-
};
|
|
19
|
-
transition = "fadeRight";
|
|
20
|
-
break;
|
|
21
|
-
case "top-right":
|
|
22
|
-
sx = {
|
|
23
|
-
top: 0,
|
|
24
|
-
right: 0
|
|
25
|
-
};
|
|
26
|
-
transition = "fadeLeft";
|
|
27
|
-
break;
|
|
28
|
-
case "top-center":
|
|
29
|
-
sx = {
|
|
30
|
-
top: 0,
|
|
31
|
-
left: "50%",
|
|
32
|
-
transform: "translateX(-50%)"
|
|
33
|
-
};
|
|
34
|
-
transition = "fadeDown";
|
|
35
|
-
break;
|
|
36
|
-
case "bottom-right":
|
|
37
|
-
sx = {
|
|
38
|
-
bottom: 0,
|
|
39
|
-
right: 0
|
|
40
|
-
};
|
|
41
|
-
transition = "fadeLeft";
|
|
42
|
-
break;
|
|
43
|
-
case "bottom-left":
|
|
44
|
-
sx = {
|
|
45
|
-
bottom: 0,
|
|
46
|
-
left: 0
|
|
47
|
-
};
|
|
48
|
-
transition = "fadeRight";
|
|
49
|
-
break;
|
|
50
|
-
case "bottom-center":
|
|
51
|
-
sx = {
|
|
52
|
-
bottom: 0,
|
|
53
|
-
left: "50%",
|
|
54
|
-
transform: "translateX(-50%)"
|
|
55
|
-
};
|
|
56
|
-
transition = "fadeUp";
|
|
57
|
-
break;
|
|
58
|
-
}
|
|
59
|
-
return { sx, transition };
|
|
60
|
-
};
|
|
61
|
-
const ToastView = (props) => {
|
|
62
|
-
const [open, setOpen] = React.useState(true);
|
|
63
|
-
const [timer, setTimer] = React.useState(null);
|
|
64
|
-
const _a = props || {}, { placement = "bottom-right", content, closeable, onClosed } = _a, rest = __rest(_a, ["placement", "content", "closeable", "onClosed"]);
|
|
65
|
-
const { transition } = formatPacement(placement);
|
|
66
|
-
return (jsx(Transition, { open: open, variant: transition, onClosed: () => {
|
|
67
|
-
onClosed();
|
|
68
|
-
}, onOpened: () => {
|
|
69
|
-
setTimer(setTimeout(() => {
|
|
70
|
-
setOpen(false);
|
|
71
|
-
}, 6000));
|
|
72
|
-
}, children: jsx(Alert, Object.assign({ shadow: 2, variant: "fill", color: "brand" }, rest, { mode: "item", mb: 1, onMouseEnter: () => {
|
|
73
|
-
clearTimeout(timer);
|
|
74
|
-
}, onMouseLeave: () => {
|
|
75
|
-
setTimer(setTimeout(() => {
|
|
76
|
-
setOpen(false);
|
|
77
|
-
}, 6000));
|
|
78
|
-
}, onClose: closeable ? () => {
|
|
79
|
-
setOpen(false);
|
|
80
|
-
} : undefined, children: content })) }));
|
|
81
|
-
};
|
|
82
|
-
const Toast = (props) => {
|
|
83
|
-
if (typeof props === "string") {
|
|
84
|
-
props = { content: props };
|
|
85
|
-
}
|
|
86
|
-
let _a = props || {}, { placement = "bottom-right", content, closeable } = _a, rest = __rest(_a, ["placement", "content", "closeable"]);
|
|
87
|
-
const { sx } = formatPacement(placement);
|
|
88
|
-
const wrapperContainerClassName = `xui-toast-container-${placement}`;
|
|
89
|
-
const wrapperClassName = `xui-toast-list-${placement}`;
|
|
90
|
-
let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`);
|
|
91
|
-
if (!wrapperEle) {
|
|
92
|
-
wrapperEle = document.createElement('div');
|
|
93
|
-
wrapperEle.className = wrapperContainerClassName;
|
|
94
|
-
const appRoot = appRootElement();
|
|
95
|
-
appRoot.appendChild(wrapperEle);
|
|
96
|
-
const wrapperRoot = createRoot(wrapperEle);
|
|
97
|
-
wrapperRoot.render(jsx(Scrollbar, { p: 1, overflow: "hidden", className: wrapperClassName, sx: Object.assign({ position: "fixed", zIndex: 99999999, display: "flex", justifyContent: "flex-end", flexDirection: "column", width: 320, height: "auto", maxHeight: "100vh" }, sx) }));
|
|
98
|
-
}
|
|
99
|
-
setTimeout(() => {
|
|
100
|
-
const wrapper = document.querySelector(`.${wrapperClassName}`);
|
|
101
|
-
const div = document.createElement('div');
|
|
102
|
-
wrapper.appendChild(div);
|
|
103
|
-
const root = createRoot(div);
|
|
104
|
-
root.render(jsx(ToastView, Object.assign({ placement: placement, content: content, closeable: closeable }, rest, { onClosed: () => {
|
|
105
|
-
root.unmount();
|
|
106
|
-
wrapper.removeChild(div);
|
|
107
|
-
if (wrapper.children.length === 0) {
|
|
108
|
-
const container = document.querySelector(`.${wrapperContainerClassName}`);
|
|
109
|
-
if (container) {
|
|
110
|
-
appRootElement().removeChild(container);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
} })));
|
|
114
|
-
}, 5);
|
|
115
|
-
};
|
|
116
|
-
|
|
117
|
-
export { Toast as default };
|
|
118
|
-
//# sourceMappingURL=index.mjs.map
|
package/Toast/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { createRoot } from \"react-dom/client\";\r\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\r\nimport React, { ReactElement } from \"react\";\r\nimport Alert, { AlertProps } from \"../Alert\";\r\nimport Scrollbar from \"../Scrollbar\";\r\n\r\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\r\n\r\nexport type UseToastProps = {\r\n title?: useBreakpointPropsType<string | ReactElement>;\r\n content?: AlertProps['children'];\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\r\n placement?: PlacementType;\r\n closeable?: useBreakpointPropsType<boolean>;\r\n}\r\n\r\n\r\nconst formatPacement = (placement: PlacementType) => {\r\n let sx: any = {}\r\n let transition: any = \"\"\r\n switch (placement) {\r\n case \"top-left\":\r\n sx = {\r\n top: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"top-right\":\r\n sx = {\r\n top: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"top-center\":\r\n sx = {\r\n top: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeDown\"\r\n break;\r\n case \"bottom-right\":\r\n sx = {\r\n bottom: 0,\r\n right: 0\r\n }\r\n transition = \"fadeLeft\"\r\n break;\r\n case \"bottom-left\":\r\n sx = {\r\n bottom: 0,\r\n left: 0\r\n }\r\n transition = \"fadeRight\"\r\n break;\r\n case \"bottom-center\":\r\n sx = {\r\n bottom: 0,\r\n left: \"50%\",\r\n transform: \"translateX(-50%)\"\r\n }\r\n transition = \"fadeUp\"\r\n break;\r\n }\r\n return { sx, transition }\r\n}\r\n\r\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\r\n const [open, setOpen] = React.useState(true)\r\n const [timer, setTimer] = React.useState<any>(null)\r\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\r\n const { transition } = formatPacement(placement)\r\n\r\n return (<Transition\r\n open={open}\r\n variant={transition}\r\n onClosed={() => {\r\n onClosed()\r\n }}\r\n onOpened={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n >\r\n <Alert\r\n shadow={2}\r\n variant=\"fill\"\r\n color=\"brand\"\r\n {...rest as any}\r\n mode=\"item\"\r\n mb={1}\r\n onMouseEnter={() => {\r\n clearTimeout(timer)\r\n }}\r\n onMouseLeave={() => {\r\n setTimer(setTimeout(() => {\r\n setOpen(false)\r\n }, 6000))\r\n }}\r\n onClose={closeable ? () => {\r\n setOpen(false)\r\n } : undefined}\r\n >{content}</Alert>\r\n </Transition>)\r\n}\r\n\r\nconst Toast = (props?: string | UseToastProps) => {\r\n if (typeof props === \"string\") {\r\n props = { content: props }\r\n }\r\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\r\n const { sx } = formatPacement(placement)\r\n\r\n const wrapperContainerClassName = `xui-toast-container-${placement}`\r\n const wrapperClassName = `xui-toast-list-${placement}`\r\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (!wrapperEle) {\r\n wrapperEle = document.createElement('div')\r\n wrapperEle.className = wrapperContainerClassName\r\n const appRoot = appRootElement()\r\n appRoot.appendChild(wrapperEle)\r\n\r\n const wrapperRoot = createRoot(wrapperEle);\r\n wrapperRoot.render(<Scrollbar\r\n p={1}\r\n overflow=\"hidden\"\r\n className={wrapperClassName}\r\n sx={{\r\n position: \"fixed\",\r\n zIndex: 99999999,\r\n display: \"flex\",\r\n justifyContent: \"flex-end\",\r\n flexDirection: \"column\",\r\n width: 320,\r\n height: \"auto\",\r\n maxHeight: \"100vh\",\r\n ...sx\r\n }}\r\n >\r\n\r\n </Scrollbar>);\r\n }\r\n\r\n setTimeout(() => {\r\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\r\n const div = document.createElement('div');\r\n wrapper.appendChild(div);\r\n const root = createRoot(div);\r\n\r\n root.render(<ToastView\r\n placement={placement}\r\n content={content}\r\n closeable={closeable}\r\n {...rest}\r\n onClosed={() => {\r\n root.unmount();\r\n wrapper.removeChild(div);\r\n if (wrapper.children.length === 0) {\r\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\r\n if (container) {\r\n appRootElement().removeChild(container);\r\n }\r\n }\r\n }}\r\n />);\r\n }, 5);\r\n\r\n}\r\n\r\nexport default Toast;"],"names":[],"mappings":";;;;;;;;;AAqBA;;;;AAIQ;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;;;;AAIR;AACI;AACI;AACA;AACA;;;;;AAKZ;AACJ;AAEA;AACI;AACA;;;AAIA;AAIQ;AACJ;AAEI;;AAEA;AACJ;;AAWI;AAEI;;AAEA;;;;AAOhB;AAEA;AACI;AACI;;AAEJ;;AAGA;AACA;;;AAGI;AACA;AACA;AACA;AAEA;;;;;;AAwBA;AACA;;;AASQ;;;;AAIQ;;;;;AAOxB;;"}
|
package/Tooltip/index.mjs
DELETED
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import { useState, Children, cloneElement } from 'react';
|
|
4
|
-
import Menu from '../Menu/index.mjs';
|
|
5
|
-
import { useBreakpointProps, useColorTemplate } from '@xanui/core';
|
|
6
|
-
|
|
7
|
-
const Tooltip = ({ children, title, variant, color, placement }) => {
|
|
8
|
-
var _a, _b;
|
|
9
|
-
const [target, setTarget] = useState();
|
|
10
|
-
const _p = {};
|
|
11
|
-
if (title)
|
|
12
|
-
_p.title = title;
|
|
13
|
-
if (color)
|
|
14
|
-
_p.color = color;
|
|
15
|
-
if (variant)
|
|
16
|
-
_p.variant = variant;
|
|
17
|
-
const p = useBreakpointProps(_p);
|
|
18
|
-
title = p.title;
|
|
19
|
-
color = (_a = p.color) !== null && _a !== void 0 ? _a : "default";
|
|
20
|
-
variant = (_b = p.variant) !== null && _b !== void 0 ? _b : "fill";
|
|
21
|
-
placement !== null && placement !== void 0 ? placement : (placement = "bottom");
|
|
22
|
-
const template = useColorTemplate(color, variant);
|
|
23
|
-
if (!children || Array.isArray(children))
|
|
24
|
-
throw new Error("Invalid children in Toast");
|
|
25
|
-
const first = Children.toArray(children).shift();
|
|
26
|
-
const child = cloneElement(first, {
|
|
27
|
-
onMouseEnter: (e) => {
|
|
28
|
-
setTarget(e.target);
|
|
29
|
-
},
|
|
30
|
-
onMouseLeave: () => setTarget(null)
|
|
31
|
-
});
|
|
32
|
-
return (jsxs(Fragment, { children: [child, jsx(Menu, { target: target, placement: placement, slotProps: {
|
|
33
|
-
content: Object.assign(Object.assign({ p: .5, shadow: 1 }, template.primary), { bgcolor: color == "default" ? "background.primary" : template.primary.bgcolor })
|
|
34
|
-
}, children: title })] }));
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
export { Tooltip as default };
|
|
38
|
-
//# sourceMappingURL=index.mjs.map
|
package/Tooltip/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\r\n\r\nimport { Children, cloneElement, ReactElement, useState } from 'react'\r\nimport Menu, { MenuProps } from '../Menu'\r\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\r\n\r\n\r\nexport type TooltipProps = {\r\n children: ReactElement;\r\n title: useBreakpointPropsType<string>;\r\n color?: useBreakpointPropsType<UseColorTemplateColor>;\r\n variant?: useBreakpointPropsType<UseColorTemplateType>;\r\n placement?: MenuProps['placement']\r\n}\r\n\r\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\r\n const [target, setTarget] = useState<any>()\r\n const _p: any = {}\r\n if (title) _p.title = title\r\n if (color) _p.color = color\r\n if (variant) _p.variant = variant\r\n const p: any = useBreakpointProps(_p)\r\n title = p.title\r\n color = p.color ?? \"default\"\r\n variant = p.variant ?? \"fill\"\r\n placement ??= \"bottom\"\r\n\r\n const template = useColorTemplate(color as any, variant as any)\r\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\r\n const first: any = Children.toArray(children).shift();\r\n const child = cloneElement(first, {\r\n onMouseEnter: (e) => {\r\n setTarget(e.target)\r\n },\r\n onMouseLeave: () => setTarget(null)\r\n })\r\n\r\n\r\n return (\r\n <>\r\n {child}\r\n <Menu\r\n target={target}\r\n placement={placement}\r\n slotProps={{\r\n content: {\r\n p: .5,\r\n shadow: 1,\r\n ...template.primary,\r\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\r\n }\r\n }}\r\n >\r\n {title as any}\r\n </Menu>\r\n </>\r\n )\r\n}\r\n\r\nexport default Tooltip"],"names":[],"mappings":";;;;;;AAeA;;;;AAGI;AAAW;AACX;AAAW;AACX;AAAa;AACb;AACA;AACA;AACA;;;;AAI0C;;AAE1C;AACI;AACI;;AAEJ;AACH;AAGD;AAOgB;AAMH;AAMjB;;"}
|
package/ViewBox/index.mjs
DELETED
|
@@ -1,30 +0,0 @@
|
|
|
1
|
-
import { __rest } from 'tslib';
|
|
2
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
3
|
-
import React from 'react';
|
|
4
|
-
import Scrollbar from '../Scrollbar/index.mjs';
|
|
5
|
-
import { useInterface, useBreakpointProps, Tag } from '@xanui/core';
|
|
6
|
-
|
|
7
|
-
const ViewBox = React.forwardRef((_a, ref) => {
|
|
8
|
-
var _b;
|
|
9
|
-
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
10
|
-
let [_c] = useInterface("ViewBox", rest, {}), { startContent, endContent, slotProps, horizental } = _c, props = __rest(_c, ["startContent", "endContent", "slotProps", "horizental"]);
|
|
11
|
-
const _p = {};
|
|
12
|
-
if (startContent)
|
|
13
|
-
_p.startContent = startContent;
|
|
14
|
-
if (endContent)
|
|
15
|
-
_p.endContent = endContent;
|
|
16
|
-
if (horizental)
|
|
17
|
-
_p.horizental = horizental;
|
|
18
|
-
const p = useBreakpointProps(_p);
|
|
19
|
-
startContent = p.startContent;
|
|
20
|
-
endContent = p.endContent;
|
|
21
|
-
horizental = p.horizental;
|
|
22
|
-
return (jsxs(Tag, Object.assign({}, props, { sxr: {
|
|
23
|
-
display: "flex",
|
|
24
|
-
justifyContent: "space-between",
|
|
25
|
-
flexDirection: horizental ? "row" : "column"
|
|
26
|
-
}, baseClass: 'viewbox', ref: ref, children: [startContent && jsx(Tag, { baseClass: 'viewbox-start-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: startContent }), jsx(Scrollbar, Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar, { className: 'viewbox-content', style: Object.assign({ flex: 1, display: "flex", flexDirection: horizental ? "row" : "column" }, (((_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.scrollbar) === null || _b === void 0 ? void 0 : _b.style) || {})), children: children })), endContent && jsx(Tag, { baseClass: 'viewbox-end-content', flexBox: true, flexDirection: horizental ? "row" : "column", children: endContent })] })));
|
|
27
|
-
});
|
|
28
|
-
|
|
29
|
-
export { ViewBox as default };
|
|
30
|
-
//# sourceMappingURL=index.mjs.map
|
package/ViewBox/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\r\nimport React, { ReactElement } from 'react'\r\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\r\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\r\n\r\n\r\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\r\n startContent?: useBreakpointPropsType<ReactElement>;\r\n endContent?: useBreakpointPropsType<ReactElement>;\r\n horizental?: useBreakpointPropsType<boolean>;\r\n slotProps?: {\r\n scrollbar?: Omit<ScrollbarProps, 'children'>;\r\n }\r\n}\r\n\r\n\r\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\r\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\r\n const _p: any = {}\r\n if (startContent) _p.startContent = startContent\r\n if (endContent) _p.endContent = endContent\r\n if (horizental) _p.horizental = horizental\r\n const p: any = useBreakpointProps(_p)\r\n startContent = p.startContent\r\n endContent = p.endContent\r\n horizental = p.horizental\r\n\r\n return (\r\n <Tag\r\n {...props}\r\n sxr={{\r\n display: \"flex\",\r\n justifyContent: \"space-between\",\r\n flexDirection: horizental ? \"row\" : \"column\"\r\n }}\r\n baseClass='viewbox'\r\n ref={ref}\r\n >\r\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\r\n <Scrollbar\r\n {...slotProps?.scrollbar}\r\n className='viewbox-content'\r\n style={{\r\n flex: 1,\r\n display: \"flex\",\r\n flexDirection: horizental ? \"row\" : \"column\",\r\n ...(slotProps?.scrollbar?.style || {})\r\n }}\r\n >\r\n {children}\r\n </Scrollbar>\r\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\r\n </Tag>\r\n )\r\n})\r\n\r\nexport default ViewBox\r\n"],"names":["_jsxs","_jsx"],"mappings":";;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkE,YAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAA,MAAA,CAAA,EAAA,EAA3D,CAAA,cAAA,EAAA,YAAA,EAAA,WAAA,EAAA,YAAA,CAA6D,CAA0C;IAC5G,MAAM,EAAE,GAAQ,EAAE;AAClB,IAAA,IAAI,YAAY;AAAE,QAAA,EAAE,CAAC,YAAY,GAAG,YAAY;AAChD,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,IAAI,UAAU;AAAE,QAAA,EAAE,CAAC,UAAU,GAAG,UAAU;AAC1C,IAAA,MAAM,CAAC,GAAQ,kBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,YAAY,GAAG,CAAC,CAAC,YAAY;AAC7B,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AACzB,IAAA,UAAU,GAAG,CAAC,CAAC,UAAU;AAEzB,IAAA,QACIA,IAAA,CAAC,GAAG,oBACI,KAAK,EAAA,EACT,GAAG,EAAE;AACD,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,cAAc,EAAE,eAAe;YAC/B,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG;SACvC,EACD,SAAS,EAAC,SAAS,EACnB,GAAG,EAAE,GAAG,EAAA,QAAA,EAAA,CAEP,YAAY,IAAIC,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIA,GAAA,CAAC,SAAS,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACF,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,EAAA,EACxB,SAAS,EAAC,iBAAiB,EAC3B,KAAK,EAAA,MAAA,CAAA,MAAA,CAAA,EACD,IAAI,EAAE,CAAC,EACP,OAAO,EAAE,MAAM,EACf,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,GACxC,CAAA,MAAA,SAAS,KAAA,IAAA,IAAT,SAAS,KAAA,MAAA,GAAA,MAAA,GAAT,SAAS,CAAE,SAAS,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,MAAA,GAAA,EAAA,CAAE,KAAK,KAAI,EAAE,EAAC,EAAA,QAAA,EAGzC,QAAQ,IACD,EACX,UAAU,IAAIA,GAAA,CAAC,GAAG,EAAA,EAAC,SAAS,EAAC,qBAAqB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,UAAU,EAAA,CAAO,CAAA,EAAA,CAAA,CAC1H;AAEd,CAAC;;;;"}
|
package/index.mjs
DELETED
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
export { default as Accordion } from './Accordion/index.mjs';
|
|
2
|
-
export { default as Autocomplete } from './Autocomplete/index.mjs';
|
|
3
|
-
export { default as Alert } from './Alert/index.mjs';
|
|
4
|
-
export { default as Avatar } from './Avatar/index.mjs';
|
|
5
|
-
export { default as Badge } from './Badge/index.mjs';
|
|
6
|
-
export { default as Box } from './Box/index.mjs';
|
|
7
|
-
export { default as Button } from './Button/index.mjs';
|
|
8
|
-
export { default as ButtonGroup } from './ButtonGroup/index.mjs';
|
|
9
|
-
export { default as Calendar } from './Calendar/index.mjs';
|
|
10
|
-
export { default as CalendarInput } from './CalendarInput/index.mjs';
|
|
11
|
-
export { default as Checkbox } from './Checkbox/index.mjs';
|
|
12
|
-
export { default as Chip } from './Chip/index.mjs';
|
|
13
|
-
export { default as CircleProgress } from './CircleProgress/index.mjs';
|
|
14
|
-
export { default as ClickOutside } from './ClickOutside/index.mjs';
|
|
15
|
-
export { default as Collaps } from './Collaps/index.mjs';
|
|
16
|
-
export { default as Container } from './Container/index.mjs';
|
|
17
|
-
export { default as Datatable } from './Datatable/index.mjs';
|
|
18
|
-
export { default as DataFilter } from './DataFilter/index.mjs';
|
|
19
|
-
export { default as Divider } from './Divider/index.mjs';
|
|
20
|
-
export { default as Drawer } from './Drawer/index.mjs';
|
|
21
|
-
export { default as Form } from './Form/index.mjs';
|
|
22
|
-
export { default as GridContainer } from './GridContainer/index.mjs';
|
|
23
|
-
export { default as GridItem } from './GridItem/index.mjs';
|
|
24
|
-
export { default as IconButton } from './IconButton/index.mjs';
|
|
25
|
-
export { default as Image } from './Image/index.mjs';
|
|
26
|
-
export { default as Input } from './Input/index.mjs';
|
|
27
|
-
export { default as Label } from './Label/index.mjs';
|
|
28
|
-
export { default as Layer } from './Layer/index.mjs';
|
|
29
|
-
export { default as LineProgress } from './LineProgress/index.mjs';
|
|
30
|
-
export { default as List } from './List/index.mjs';
|
|
31
|
-
export { default as ListItem } from './ListItem/index.mjs';
|
|
32
|
-
export { default as LoadingBox } from './LoadingBox/index.mjs';
|
|
33
|
-
export { default as Menu } from './Menu/index.mjs';
|
|
34
|
-
export { default as Modal } from './Modal/index.mjs';
|
|
35
|
-
export { default as NoSSR } from './NoSSR/index.mjs';
|
|
36
|
-
export { default as Option } from './Option/index.mjs';
|
|
37
|
-
export { default as Paper } from './Paper/index.mjs';
|
|
38
|
-
export { default as Portal } from './Portal/index.mjs';
|
|
39
|
-
export { default as Radio } from './Radio/index.mjs';
|
|
40
|
-
export { default as Scrollbar } from './Scrollbar/index.mjs';
|
|
41
|
-
export { default as Select } from './Select/index.mjs';
|
|
42
|
-
export { default as Stack } from './Stack/index.mjs';
|
|
43
|
-
export { default as Switch } from './Switch/index.mjs';
|
|
44
|
-
export { default as Tab } from './Tab/index.mjs';
|
|
45
|
-
export { default as Table } from './Table/index.mjs';
|
|
46
|
-
export { default as TableBody } from './TableBody/index.mjs';
|
|
47
|
-
export { default as TableCell } from './TableCell/index.mjs';
|
|
48
|
-
export { default as TableFooter } from './TableFooter/index.mjs';
|
|
49
|
-
export { default as TableHead } from './TableHead/index.mjs';
|
|
50
|
-
export { default as TablePagination } from './TablePagination/index.mjs';
|
|
51
|
-
export { default as TableRow } from './TableRow/index.mjs';
|
|
52
|
-
export { default as Tabs } from './Tabs/index.mjs';
|
|
53
|
-
export { default as Text } from './Text/index.mjs';
|
|
54
|
-
export { default as Toast } from './Toast/index.mjs';
|
|
55
|
-
export { default as Tooltip } from './Tooltip/index.mjs';
|
|
56
|
-
export { default as useCorner } from './useCorner/index.mjs';
|
|
57
|
-
export { default as ViewBox } from './ViewBox/index.mjs';
|
|
58
|
-
export { default as SelectFilter } from './DataFilter/options/SelectFilter.mjs';
|
|
59
|
-
export { default as MultiSelectFilter } from './DataFilter/options/MultiSelectFilter.mjs';
|
|
60
|
-
export { default as NumberFilter } from './DataFilter/options/NumberFilter.mjs';
|
|
61
|
-
export { default as TextFilter } from './DataFilter/options/TextFilter.mjs';
|
|
62
|
-
export { default as NumberRangeFilter } from './DataFilter/options/NumberRangeFilter.mjs';
|
|
63
|
-
export { default as DateFilter } from './DataFilter/options/DateFilter.mjs';
|
|
64
|
-
export { default as DateRangeFilter } from './DataFilter/options/DateRangeFilter.mjs';
|
|
65
|
-
//# sourceMappingURL=index.mjs.map
|
package/index.mjs.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
package/useAlert/index.mjs
DELETED
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import { __rest } from 'tslib';
|
|
3
|
-
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
4
|
-
import { Tag } from '@xanui/core';
|
|
5
|
-
import Button from '../Button/index.mjs';
|
|
6
|
-
import useModal from '../useModal/index.mjs';
|
|
7
|
-
import Alert from '../Alert/index.mjs';
|
|
8
|
-
import React from 'react';
|
|
9
|
-
|
|
10
|
-
const useAlert = (props) => {
|
|
11
|
-
const [loading, setLoading] = React.useState(false);
|
|
12
|
-
let { content, size, color, direction, variant, closeButton, clickOutsideToClose, okButtonText, cancelButtonText, hideOkButton, hideCancelButton, buttonPlacement, onConfirm, onCancel, transition, blurMode, slotProps } = props, rest = __rest(props, ["content", "size", "color", "direction", "variant", "closeButton", "clickOutsideToClose", "okButtonText", "cancelButtonText", "hideOkButton", "hideCancelButton", "buttonPlacement", "onConfirm", "onCancel", "transition", "blurMode", "slotProps"]);
|
|
13
|
-
hideOkButton !== null && hideOkButton !== void 0 ? hideOkButton : (hideOkButton = false);
|
|
14
|
-
hideCancelButton !== null && hideCancelButton !== void 0 ? hideCancelButton : (hideCancelButton = false);
|
|
15
|
-
size !== null && size !== void 0 ? size : (size = "small");
|
|
16
|
-
color !== null && color !== void 0 ? color : (color = 'default');
|
|
17
|
-
variant !== null && variant !== void 0 ? variant : (variant = "text");
|
|
18
|
-
direction !== null && direction !== void 0 ? direction : (direction = "column");
|
|
19
|
-
buttonPlacement !== null && buttonPlacement !== void 0 ? buttonPlacement : (buttonPlacement = "end");
|
|
20
|
-
let sx = {};
|
|
21
|
-
switch (buttonPlacement) {
|
|
22
|
-
case "start":
|
|
23
|
-
sx.justifyContent = 'flex-start';
|
|
24
|
-
break;
|
|
25
|
-
case "end":
|
|
26
|
-
sx.justifyContent = 'flex-end';
|
|
27
|
-
break;
|
|
28
|
-
case "between":
|
|
29
|
-
sx.justifyContent = 'space-between';
|
|
30
|
-
break;
|
|
31
|
-
case "full":
|
|
32
|
-
sx = {
|
|
33
|
-
"& button": {
|
|
34
|
-
flex: 1
|
|
35
|
-
}
|
|
36
|
-
};
|
|
37
|
-
break;
|
|
38
|
-
}
|
|
39
|
-
let sizes = {
|
|
40
|
-
small: 320,
|
|
41
|
-
medium: 400,
|
|
42
|
-
large: 600
|
|
43
|
-
};
|
|
44
|
-
let okcolor = color;
|
|
45
|
-
let closecolor = color;
|
|
46
|
-
if (color === 'default') {
|
|
47
|
-
okcolor = 'brand';
|
|
48
|
-
closecolor = 'default';
|
|
49
|
-
variant = 'text';
|
|
50
|
-
}
|
|
51
|
-
else {
|
|
52
|
-
if (variant === 'fill') {
|
|
53
|
-
okcolor = 'default';
|
|
54
|
-
closecolor = 'default';
|
|
55
|
-
}
|
|
56
|
-
else {
|
|
57
|
-
okcolor = color;
|
|
58
|
-
closecolor = 'default';
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
const modal = useModal(jsxs(Alert, Object.assign({ direction: direction, sx: {
|
|
62
|
-
px: 2,
|
|
63
|
-
py: 1,
|
|
64
|
-
pt: direction === 'row' ? 1 : 2
|
|
65
|
-
}, color: color, variant: variant, onClose: closeButton ? close : undefined }, rest, { children: [typeof content === "function" ? content({
|
|
66
|
-
open: () => modal.open(),
|
|
67
|
-
close: () => modal.close(),
|
|
68
|
-
loading: (is) => setLoading(is),
|
|
69
|
-
isLoading: () => loading
|
|
70
|
-
}) : content, jsxs(Tag, { sxr: Object.assign({ display: "flex", gap: 1, pt: 4, flexDirection: "row" }, sx), children: [!hideCancelButton && jsx(Button, Object.assign({ disabled: loading, color: closecolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.closeButton, { onClick: async () => {
|
|
71
|
-
setLoading(true);
|
|
72
|
-
onCancel && await onCancel();
|
|
73
|
-
setLoading(false);
|
|
74
|
-
modal.close();
|
|
75
|
-
}, children: cancelButtonText || "Close" })), jsx(Button, Object.assign({ loading: loading, color: okcolor, variant: "fill" }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.okButton, { onClick: async () => {
|
|
76
|
-
setLoading(true);
|
|
77
|
-
onConfirm && await onConfirm();
|
|
78
|
-
setLoading(false);
|
|
79
|
-
modal.close();
|
|
80
|
-
}, children: okButtonText || "OK" }))] })] })), Object.assign(Object.assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.modal), { size: sizes[size] || size, blur: 40, blurMode: blurMode || "transparent", transition: transition || "zoom", onClickOutside: async () => {
|
|
81
|
-
if (clickOutsideToClose && !loading) {
|
|
82
|
-
setLoading(true);
|
|
83
|
-
onCancel && await onCancel();
|
|
84
|
-
setLoading(false);
|
|
85
|
-
modal.close();
|
|
86
|
-
}
|
|
87
|
-
} }));
|
|
88
|
-
return Object.assign(Object.assign({}, modal), { loading: (is) => setLoading(is), isLoading: () => loading });
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
export { useAlert as default };
|
|
92
|
-
//# sourceMappingURL=index.mjs.map
|