@xanui/ui 1.1.49 → 1.1.51
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.cjs +1 -1
- package/Datatable/index.cjs.map +1 -1
- package/Datatable/index.js +1 -1
- package/Datatable/index.js.map +1 -1
- package/List/index.cjs +15 -19
- package/List/index.cjs.map +1 -1
- package/List/index.d.ts +1 -3
- package/List/index.js +15 -19
- package/List/index.js.map +1 -1
- package/package.json +1 -1
package/Datatable/index.cjs
CHANGED
|
@@ -47,7 +47,7 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
47
47
|
np.rowAction = undefined;
|
|
48
48
|
}
|
|
49
49
|
return np;
|
|
50
|
-
}, [p
|
|
50
|
+
}, [p]);
|
|
51
51
|
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, state: userState = {}, onChange, fixedHeader, hidePagination, slotProps,
|
|
52
52
|
// skip props for ViewBox
|
|
53
53
|
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = tslib.__rest(_props, ["rows", "tabs", "pagination", "state", "onChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
|
package/Datatable/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n\n const state = {\n selected: userState?.selected || [],\n selectAll: userState?.selectAll || false,\n pagination: {\n page: userState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: userState?.from || 1,\n to: userState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (userState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: userState?.search || \"\",\n sortable: userState?.sortable || {},\n filters: userState?.filters || {}\n }\n\n const update = (s: Partial<DatatableState>) => {\n onChange({ ...state, ...s })\n }\n\n return (\n <ViewBox\n height=\"100%\"\n {...viewBoxProps}\n baseClass='datatable'\n ref={ref as any}\n sx={{\n ...viewBoxProps?.sx,\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!hidePagination && <TablePagination\n disabled={_props.skeleton ? true : false}\n {...slotProps?.pagination}\n total={total || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n slotProps={{\n select: {\n size: \"small\",\n }\n }}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;;;AAcA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;AACJ;AAEA;;;AA4BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;;AAMJ;AACI;AACJ;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
|
package/Datatable/index.js
CHANGED
|
@@ -45,7 +45,7 @@ const DataTable = React.forwardRef((props, ref) => {
|
|
|
45
45
|
np.rowAction = undefined;
|
|
46
46
|
}
|
|
47
47
|
return np;
|
|
48
|
-
}, [p
|
|
48
|
+
}, [p]);
|
|
49
49
|
let { rows, tabs, pagination: { perpages = [30, 50, 100], total = 0 } = {}, state: userState = {}, onChange, fixedHeader, hidePagination, slotProps,
|
|
50
50
|
// skip props for ViewBox
|
|
51
51
|
skeleton, rowAction, disableRow, renderRow, filters, hideCheckbox, hideSearch, columns, compact } = _props, viewBoxProps = __rest(_props, ["rows", "tabs", "pagination", "state", "onChange", "fixedHeader", "hidePagination", "slotProps", "skeleton", "rowAction", "disableRow", "renderRow", "filters", "hideCheckbox", "hideSearch", "columns", "compact"]);
|
package/Datatable/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Datatable/index.tsx"],"sourcesContent":["\"use client\";\nimport React, { useMemo } from 'react'\nimport ViewBox from '../ViewBox'\nimport { Tag, useInterface } from '@xanui/core';\nimport SelectedBox from './SelectedBox'\nimport TableArea from './Table'\nimport FilterBox from './FilterBox'\nimport TablePagination, { TablePaginationState } from '../TablePagination'\nimport Stack from '../Stack'\nimport { DatatableProps, DatatableState } from './types';\nimport Skeleton from '../Skeleton';\n\nexport type * from './types';\n\nconst DataTable = React.forwardRef((props: DatatableProps, ref: React.Ref<HTMLDivElement>) => {\n let [p] = useInterface<any>(\"Datatable\", props, {})\n\n let _props = useMemo(() => {\n let np = { ...p }\n\n if (typeof np.skeleton === 'number' || np.skeleton === true) {\n const limit = np.perpages && np.perpages.length > 0 ? np.perpages[0] : 10\n let length = np.skeleton === true ? limit : np.skeleton\n\n if (!np.hideCheckbox) {\n np.columns = [{\n label: '', field: \"__checkbox\", width: 34\n }, ...np.columns]\n }\n\n if (np.rowAction) {\n np.columns = [...np.columns, { label: \"\", field: \"__actions\", width: 34 }]\n }\n\n let columns = np.columns || []\n\n np.rows = []\n for (let i = 0; i < length; i++) {\n let r: any = { id: i }\n for (let col of columns) {\n r[col.field] = \"\"\n }\n np.rows.push(r)\n }\n\n np.renderRow = (r: any) => {\n for (let col of columns) {\n r[col.field] = <Skeleton\n animation={\"wave\"}\n height={16}\n radius={.5}\n width={\"100%\"}\n />\n }\n return r\n }\n np.hideCheckbox = true\n np.rowAction = undefined\n }\n return np\n }, [p])\n\n let {\n rows,\n tabs,\n\n pagination: { perpages = [30, 50, 100], total = 0 } = {},\n state: userState = {},\n onChange,\n\n fixedHeader,\n hidePagination,\n slotProps,\n\n\n // skip props for ViewBox\n skeleton,\n rowAction,\n disableRow,\n renderRow,\n filters,\n hideCheckbox,\n hideSearch,\n columns,\n compact,\n\n ...viewBoxProps\n } = _props\n\n\n const state = {\n selected: userState?.selected || [],\n selectAll: userState?.selectAll || false,\n pagination: {\n page: userState?.page || 1,\n perpage: perpages && perpages.length > 0 ? perpages[0] : 10,\n from: userState?.from || 1,\n to: userState?.to || (perpages && perpages.length > 0 ? perpages[0] : 10),\n },\n tab: tabs ? (userState?.tab || tabs[0].value || tabs[0].label.toLowerCase()) : \"\",\n search: userState?.search || \"\",\n sortable: userState?.sortable || {},\n filters: userState?.filters || {}\n }\n\n const update = (s: Partial<DatatableState>) => {\n onChange({ ...state, ...s })\n }\n\n return (\n <ViewBox\n height=\"100%\"\n {...viewBoxProps}\n baseClass='datatable'\n ref={ref as any}\n sx={{\n ...viewBoxProps?.sx,\n '& thead': fixedHeader ? {\n position: \"sticky\",\n top: 0,\n bgcolor: \"background.primary\",\n zIndex: 1\n } : {},\n }}\n startContent={(\n <Tag\n baseClass='datatable-header'\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n justifyContent: \"space-between\"\n }}\n >\n <SelectedBox {..._props} update={update} state={state} />\n <FilterBox {..._props} update={update} state={state} />\n </Tag>\n )}\n >\n <TableArea\n {..._props}\n update={update}\n state={state}\n />\n <Stack\n p={1}\n alignItems=\"flex-end\"\n >\n {!hidePagination && <TablePagination\n disabled={_props.skeleton ? true : false}\n {...slotProps?.pagination}\n total={total || rows.length}\n page={state.pagination.page}\n perpage={state.pagination.perpage}\n perpages={perpages}\n slotProps={{\n select: {\n size: \"small\",\n }\n }}\n onChange={(state: TablePaginationState) => {\n update({ pagination: state })\n }}\n />}\n </Stack>\n </ViewBox>\n )\n})\n\nexport default DataTable"],"names":[],"mappings":";;;;;;;;;;;;;AAcA;AACI;AAEA;AACI;AAEA;;AAEI;AAEA;;;AAGK;;AAGL;;;AAIA;AAEA;AACA;AACI;AACA;AACI;;AAEJ;;AAGJ;AACI;;;AAQA;AACJ;AACA;AACA;;AAEJ;AACJ;AAEA;;;AA4BA;;;AAGI;;AAEI;;AAEA;AACH;AACD;;;;;AAMJ;AACI;AACJ;AAEA;AASgB;AACA;AACA;AACA;AACH;AAMO;AACA;AACA;;AAyBA;AACI;AACH;AACJ;AAEG;AACJ;AAKpB;;"}
|
package/List/index.cjs
CHANGED
|
@@ -7,9 +7,9 @@ var core = require('@xanui/core');
|
|
|
7
7
|
var ListContext = require('./ListContext.cjs');
|
|
8
8
|
|
|
9
9
|
const List = React.forwardRef((_a, ref) => {
|
|
10
|
-
var _b, _c, _d
|
|
10
|
+
var _b, _c, _d;
|
|
11
11
|
var { children } = _a, rest = tslib.__rest(_a, ["children"]);
|
|
12
|
-
let [
|
|
12
|
+
let [_e] = core.useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _e, props = tslib.__rest(_e, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
|
|
13
13
|
const _p = {};
|
|
14
14
|
if (color)
|
|
15
15
|
_p.color = color;
|
|
@@ -24,39 +24,35 @@ const List = React.forwardRef((_a, ref) => {
|
|
|
24
24
|
const p = core.useBreakpointProps(_p);
|
|
25
25
|
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
26
26
|
variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
|
|
27
|
-
|
|
28
|
-
hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
|
|
29
|
-
size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
|
|
27
|
+
size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
|
|
30
28
|
const template = core.useColorTemplate(color, variant);
|
|
31
|
-
const
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
sxOutline = {
|
|
35
|
-
"& .list-item": {
|
|
36
|
-
border: "1px solid",
|
|
37
|
-
borderColor: "transparent"
|
|
38
|
-
}
|
|
39
|
-
};
|
|
40
|
-
}
|
|
41
|
-
return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
|
|
29
|
+
const defaultTemplate = core.useColorTemplate("default", "text");
|
|
30
|
+
const hoverTemplate = core.useColorTemplate('default', "soft");
|
|
31
|
+
return (jsxRuntime.jsx(ListContext.ListContext.Provider, { value: { size }, children: jsxRuntime.jsx(core.Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0, "& .list-item-icon": {
|
|
42
32
|
color: "text.secondary"
|
|
43
33
|
}, "& .list-item-text": {
|
|
44
34
|
color: "text.primary"
|
|
45
35
|
}, "& .list-item-subtitle": {
|
|
46
36
|
color: "text.secondary"
|
|
47
|
-
}, "& .xui-list-item
|
|
37
|
+
}, "& .xui-list-item": Object.assign(Object.assign({}, defaultTemplate.primary), { "& .list-item-icon": {
|
|
38
|
+
color: defaultTemplate.primary.color
|
|
39
|
+
}, "& .list-item-text": {
|
|
40
|
+
color: defaultTemplate.primary.color
|
|
41
|
+
}, "& .list-item-subtitle": {
|
|
42
|
+
color: hoverColor === 'default' ? "text.secondary" : defaultTemplate.primary.color
|
|
43
|
+
} }), "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
48
44
|
color: hoverTemplate.primary.color
|
|
49
45
|
}, "& .list-item-text": {
|
|
50
46
|
color: hoverTemplate.primary.color
|
|
51
47
|
}, "& .list-item-subtitle": {
|
|
52
|
-
color:
|
|
48
|
+
color: hoverTemplate.primary.color
|
|
53
49
|
} }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
|
|
54
50
|
color: template.primary.color
|
|
55
51
|
}, "& .list-item-text": {
|
|
56
52
|
color: template.primary.color
|
|
57
53
|
}, "& .list-item-subtitle": {
|
|
58
54
|
color: template.primary.color
|
|
59
|
-
} }) }
|
|
55
|
+
}, border: "0" }) }, (sx || {})), ref: ref, children: children })) }));
|
|
60
56
|
});
|
|
61
57
|
|
|
62
58
|
module.exports = List;
|
package/List/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n size = p.size ?? \"medium\"\n\n const template = useColorTemplate(color, variant)\n const defaultTemplate = useColorTemplate(\"default\", \"text\")\n const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n return (\n <ListContext.Provider value={{ size }}>\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n\n \"& .xui-list-item\": {\n ...defaultTemplate.primary,\n \"& .list-item-icon\": {\n color: defaultTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: defaultTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n },\n\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverTemplate.primary.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template.primary,\n \"& .list-item-icon\": {\n color: template.primary.color\n },\n \"& .list-item-text\": {\n color: template.primary.color\n },\n \"& .list-item-subtitle\": {\n color: template.primary.color\n },\n border: \"0\"\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n </ListContext.Provider>\n )\n})\n\nexport default List"],"names":["__rest","useInterface","useBreakpointProps","useColorTemplate","_jsx","ListContext","Tag"],"mappings":"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"}
|
package/List/index.d.ts
CHANGED
|
@@ -3,9 +3,7 @@ import { TagComponentType, TagProps, useBreakpointPropsType, UseColorTemplateCol
|
|
|
3
3
|
|
|
4
4
|
type ListProps<T extends TagComponentType = "ul"> = Omit<TagProps<T>, 'color' | "size"> & {
|
|
5
5
|
color?: useBreakpointPropsType<UseColorTemplateColor>;
|
|
6
|
-
variant?: useBreakpointPropsType<UseColorTemplateType>;
|
|
7
|
-
hoverColor?: useBreakpointPropsType<UseColorTemplateColor>;
|
|
8
|
-
hoverVariant?: useBreakpointPropsType<UseColorTemplateType>;
|
|
6
|
+
variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, "outline">;
|
|
9
7
|
size?: useBreakpointPropsType<"small" | "medium" | "large">;
|
|
10
8
|
};
|
|
11
9
|
declare const List: React.ForwardRefExoticComponent<Omit<ListProps<TagComponentType>, "ref"> & React.RefAttributes<any>>;
|
package/List/index.js
CHANGED
|
@@ -5,9 +5,9 @@ import { useInterface, useBreakpointProps, useColorTemplate, Tag } from '@xanui/
|
|
|
5
5
|
import { ListContext } from './ListContext.js';
|
|
6
6
|
|
|
7
7
|
const List = React.forwardRef((_a, ref) => {
|
|
8
|
-
var _b, _c, _d
|
|
8
|
+
var _b, _c, _d;
|
|
9
9
|
var { children } = _a, rest = __rest(_a, ["children"]);
|
|
10
|
-
let [
|
|
10
|
+
let [_e] = useInterface("List", rest, {}), { sx, color, variant, hoverColor, hoverVariant, size } = _e, props = __rest(_e, ["sx", "color", "variant", "hoverColor", "hoverVariant", "size"]);
|
|
11
11
|
const _p = {};
|
|
12
12
|
if (color)
|
|
13
13
|
_p.color = color;
|
|
@@ -22,39 +22,35 @@ const List = React.forwardRef((_a, ref) => {
|
|
|
22
22
|
const p = useBreakpointProps(_p);
|
|
23
23
|
color = (_b = p.color) !== null && _b !== void 0 ? _b : "brand";
|
|
24
24
|
variant = (_c = p.variant) !== null && _c !== void 0 ? _c : "fill";
|
|
25
|
-
|
|
26
|
-
hoverVariant = (_e = p.hoverVariant) !== null && _e !== void 0 ? _e : "soft";
|
|
27
|
-
size = (_f = p.size) !== null && _f !== void 0 ? _f : "medium";
|
|
25
|
+
size = (_d = p.size) !== null && _d !== void 0 ? _d : "medium";
|
|
28
26
|
const template = useColorTemplate(color, variant);
|
|
29
|
-
const
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
sxOutline = {
|
|
33
|
-
"& .list-item": {
|
|
34
|
-
border: "1px solid",
|
|
35
|
-
borderColor: "transparent"
|
|
36
|
-
}
|
|
37
|
-
};
|
|
38
|
-
}
|
|
39
|
-
return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign(Object.assign(Object.assign({ listStyle: "none", p: 0, m: 0 }, sxOutline), { "& .list-item-icon": {
|
|
27
|
+
const defaultTemplate = useColorTemplate("default", "text");
|
|
28
|
+
const hoverTemplate = useColorTemplate('default', "soft");
|
|
29
|
+
return (jsx(ListContext.Provider, { value: { size }, children: jsx(Tag, Object.assign({ component: 'ul' }, props, { baseClass: 'list', sxr: Object.assign({ listStyle: "none", p: 0, m: 0, "& .list-item-icon": {
|
|
40
30
|
color: "text.secondary"
|
|
41
31
|
}, "& .list-item-text": {
|
|
42
32
|
color: "text.primary"
|
|
43
33
|
}, "& .list-item-subtitle": {
|
|
44
34
|
color: "text.secondary"
|
|
45
|
-
}, "& .xui-list-item
|
|
35
|
+
}, "& .xui-list-item": Object.assign(Object.assign({}, defaultTemplate.primary), { "& .list-item-icon": {
|
|
36
|
+
color: defaultTemplate.primary.color
|
|
37
|
+
}, "& .list-item-text": {
|
|
38
|
+
color: defaultTemplate.primary.color
|
|
39
|
+
}, "& .list-item-subtitle": {
|
|
40
|
+
color: hoverColor === 'default' ? "text.secondary" : defaultTemplate.primary.color
|
|
41
|
+
} }), "& .xui-list-item:not(.list-item-selected):hover": Object.assign(Object.assign({}, hoverTemplate.primary), { "& .list-item-icon": {
|
|
46
42
|
color: hoverTemplate.primary.color
|
|
47
43
|
}, "& .list-item-text": {
|
|
48
44
|
color: hoverTemplate.primary.color
|
|
49
45
|
}, "& .list-item-subtitle": {
|
|
50
|
-
color:
|
|
46
|
+
color: hoverTemplate.primary.color
|
|
51
47
|
} }), "& .xui-list-item.list-item-selected": Object.assign(Object.assign({}, template.primary), { "& .list-item-icon": {
|
|
52
48
|
color: template.primary.color
|
|
53
49
|
}, "& .list-item-text": {
|
|
54
50
|
color: template.primary.color
|
|
55
51
|
}, "& .list-item-subtitle": {
|
|
56
52
|
color: template.primary.color
|
|
57
|
-
} }) }
|
|
53
|
+
}, border: "0" }) }, (sx || {})), ref: ref, children: children })) }));
|
|
58
54
|
});
|
|
59
55
|
|
|
60
56
|
export { List as default };
|
package/List/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/List/index.tsx"],"sourcesContent":["\nimport React from 'react'\nimport { Tag, TagProps, TagComponentType, useInterface, useColorTemplate, UseColorTemplateType, UseColorTemplateColor, useBreakpointProps, useBreakpointPropsType } from '@xanui/core'\nimport { ListContext } from './ListContext';\n\nexport type ListProps<T extends TagComponentType = \"ul\"> = Omit<TagProps<T>, 'color' | \"size\"> & {\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: Omit<useBreakpointPropsType<UseColorTemplateType>, \"outline\">;\n size?: useBreakpointPropsType<\"small\" | \"medium\" | \"large\">;\n}\n\n\nconst List = React.forwardRef(<T extends TagComponentType = \"ul\">({ children, ...rest }: ListProps<T>, ref: React.Ref<any>) => {\n let [{ sx, color, variant, hoverColor, hoverVariant, size, ...props }] = useInterface<any>(\"List\", rest, {})\n const _p: any = {}\n if (color) _p.color = color\n if (variant) _p.variant = variant\n if (hoverColor) _p.hoverColor = hoverColor\n if (hoverVariant) _p.hoverVariant = hoverVariant\n if (size) _p.size = size\n const p: any = useBreakpointProps(_p)\n\n color = p.color ?? \"brand\"\n variant = p.variant ?? \"fill\"\n size = p.size ?? \"medium\"\n\n const template = useColorTemplate(color, variant)\n const defaultTemplate = useColorTemplate(\"default\", \"text\")\n const hoverTemplate = useColorTemplate('default', \"soft\")\n\n\n return (\n <ListContext.Provider value={{ size }}>\n <Tag\n component='ul'\n {...props}\n baseClass='list'\n sxr={{\n listStyle: \"none\",\n p: 0,\n m: 0,\n \"& .list-item-icon\": {\n color: \"text.secondary\"\n },\n \"& .list-item-text\": {\n color: \"text.primary\"\n },\n \"& .list-item-subtitle\": {\n color: \"text.secondary\"\n },\n\n \"& .xui-list-item\": {\n ...defaultTemplate.primary,\n \"& .list-item-icon\": {\n color: defaultTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: defaultTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverColor === 'default' ? \"text.secondary\" : defaultTemplate.primary.color\n },\n\n },\n \"& .xui-list-item:not(.list-item-selected):hover\": {\n ...hoverTemplate.primary,\n \"& .list-item-icon\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-text\": {\n color: hoverTemplate.primary.color\n },\n \"& .list-item-subtitle\": {\n color: hoverTemplate.primary.color\n },\n },\n \"& .xui-list-item.list-item-selected\": {\n ...template.primary,\n \"& .list-item-icon\": {\n color: template.primary.color\n },\n \"& .list-item-text\": {\n color: template.primary.color\n },\n \"& .list-item-subtitle\": {\n color: template.primary.color\n },\n border: \"0\"\n },\n ...(sx || {} as any)\n }}\n ref={ref}\n >\n {children}\n </Tag>\n </ListContext.Provider>\n )\n})\n\nexport default List"],"names":["_jsx"],"mappings":"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"}
|