@xanui/ui 1.1.50 → 1.1.52
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/Accordion/index.cjs.map +1 -1
- package/Accordion/index.js.map +1 -1
- package/Alert/index.cjs.map +1 -1
- package/Alert/index.js.map +1 -1
- package/Autocomplete/index.cjs.map +1 -1
- package/Autocomplete/index.js.map +1 -1
- package/Avatar/index.cjs.map +1 -1
- package/Avatar/index.js.map +1 -1
- package/Badge/index.cjs.map +1 -1
- package/Badge/index.js.map +1 -1
- package/Box/index.cjs.map +1 -1
- package/Box/index.js.map +1 -1
- package/Button/index.cjs.map +1 -1
- package/Button/index.js.map +1 -1
- package/ButtonGroup/index.cjs.map +1 -1
- package/ButtonGroup/index.js.map +1 -1
- package/Calendar/index.cjs.map +1 -1
- package/Calendar/index.js.map +1 -1
- package/CalendarInput/index.cjs.map +1 -1
- package/CalendarInput/index.js.map +1 -1
- package/Checkbox/index.cjs.map +1 -1
- package/Checkbox/index.js.map +1 -1
- package/Chip/index.cjs.map +1 -1
- package/Chip/index.js.map +1 -1
- package/CircleProgress/index.cjs.map +1 -1
- package/CircleProgress/index.js.map +1 -1
- package/ClickOutside/index.cjs.map +1 -1
- package/ClickOutside/index.js.map +1 -1
- package/Collaps/index.cjs.map +1 -1
- package/Collaps/index.js.map +1 -1
- package/Container/index.cjs.map +1 -1
- package/Container/index.js.map +1 -1
- package/DataFilter/index.cjs.map +1 -1
- package/DataFilter/index.js.map +1 -1
- package/DataFilter/options/DateFilter.cjs.map +1 -1
- package/DataFilter/options/DateFilter.js.map +1 -1
- package/DataFilter/options/DateRangeFilter.cjs.map +1 -1
- package/DataFilter/options/DateRangeFilter.js.map +1 -1
- package/DataFilter/options/MultiSelectFilter.cjs.map +1 -1
- package/DataFilter/options/MultiSelectFilter.js.map +1 -1
- package/DataFilter/options/NumberFilter.cjs.map +1 -1
- package/DataFilter/options/NumberFilter.js.map +1 -1
- package/DataFilter/options/NumberRangeFilter.cjs.map +1 -1
- package/DataFilter/options/NumberRangeFilter.js.map +1 -1
- package/DataFilter/options/SelectFilter.cjs.map +1 -1
- package/DataFilter/options/SelectFilter.js.map +1 -1
- package/DataFilter/options/TextFilter.cjs.map +1 -1
- package/DataFilter/options/TextFilter.js.map +1 -1
- package/Datatable/FilterBox.cjs.map +1 -1
- package/Datatable/FilterBox.js.map +1 -1
- package/Datatable/Row.cjs +1 -1
- package/Datatable/Row.cjs.map +1 -1
- package/Datatable/Row.js +1 -1
- package/Datatable/Row.js.map +1 -1
- package/Datatable/SelectedBox.cjs.map +1 -1
- package/Datatable/SelectedBox.js.map +1 -1
- package/Datatable/Table.cjs +1 -1
- package/Datatable/Table.cjs.map +1 -1
- package/Datatable/Table.js +1 -1
- package/Datatable/Table.js.map +1 -1
- package/Datatable/TableHead.cjs.map +1 -1
- package/Datatable/TableHead.js.map +1 -1
- 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/Divider/index.cjs.map +1 -1
- package/Divider/index.js.map +1 -1
- package/Drawer/index.cjs.map +1 -1
- package/Drawer/index.js.map +1 -1
- package/Form/index.cjs.map +1 -1
- package/Form/index.js.map +1 -1
- package/GridContainer/index.cjs.map +1 -1
- package/GridContainer/index.js.map +1 -1
- package/GridItem/index.cjs.map +1 -1
- package/GridItem/index.js.map +1 -1
- package/IconButton/index.cjs.map +1 -1
- package/IconButton/index.js.map +1 -1
- package/Image/index.cjs.map +1 -1
- package/Image/index.js.map +1 -1
- package/Input/index.cjs.map +1 -1
- package/Input/index.js.map +1 -1
- package/InputNumber/index.cjs.map +1 -1
- package/InputNumber/index.js.map +1 -1
- package/Label/index.cjs.map +1 -1
- package/Label/index.js.map +1 -1
- package/Layer/index.cjs.map +1 -1
- package/Layer/index.js.map +1 -1
- package/LineProgress/index.cjs.map +1 -1
- package/LineProgress/index.js.map +1 -1
- package/List/ListContext.cjs.map +1 -1
- package/List/ListContext.js.map +1 -1
- package/List/index.cjs.map +1 -1
- package/List/index.js.map +1 -1
- package/ListItem/index.cjs.map +1 -1
- package/ListItem/index.js.map +1 -1
- package/LoadingBox/index.cjs.map +1 -1
- package/LoadingBox/index.js.map +1 -1
- package/Menu/index.cjs.map +1 -1
- package/Menu/index.js.map +1 -1
- package/Modal/index.cjs.map +1 -1
- package/Modal/index.js.map +1 -1
- package/NoSSR/index.cjs.map +1 -1
- package/NoSSR/index.js.map +1 -1
- package/Option/index.cjs.map +1 -1
- package/Option/index.js.map +1 -1
- package/Paper/index.cjs.map +1 -1
- package/Paper/index.js.map +1 -1
- package/Portal/index.cjs.map +1 -1
- package/Portal/index.js.map +1 -1
- package/Radio/index.cjs.map +1 -1
- package/Radio/index.js.map +1 -1
- package/Scrollbar/index.cjs.map +1 -1
- package/Scrollbar/index.js.map +1 -1
- package/Select/index.cjs.map +1 -1
- package/Select/index.js.map +1 -1
- package/Skeleton/index.cjs.map +1 -1
- package/Skeleton/index.js.map +1 -1
- package/Stack/index.cjs.map +1 -1
- package/Stack/index.js.map +1 -1
- package/Switch/index.cjs.map +1 -1
- package/Switch/index.js.map +1 -1
- package/Tab/index.cjs.map +1 -1
- package/Tab/index.js.map +1 -1
- package/Table/index.cjs.map +1 -1
- package/Table/index.js.map +1 -1
- package/TableBody/index.cjs.map +1 -1
- package/TableBody/index.js.map +1 -1
- package/TableCell/index.cjs.map +1 -1
- package/TableCell/index.js.map +1 -1
- package/TableFooter/index.cjs.map +1 -1
- package/TableFooter/index.js.map +1 -1
- package/TableHead/index.cjs.map +1 -1
- package/TableHead/index.js.map +1 -1
- package/TablePagination/index.cjs.map +1 -1
- package/TablePagination/index.js.map +1 -1
- package/TableRow/index.cjs.map +1 -1
- package/TableRow/index.js.map +1 -1
- package/Tabs/index.cjs.map +1 -1
- package/Tabs/index.js.map +1 -1
- package/Text/index.cjs.map +1 -1
- package/Text/index.js.map +1 -1
- package/Toast/index.cjs.map +1 -1
- package/Toast/index.js.map +1 -1
- package/Tooltip/index.cjs.map +1 -1
- package/Tooltip/index.js.map +1 -1
- package/ViewBox/index.cjs.map +1 -1
- package/ViewBox/index.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +104 -104
- package/useAlert/index.cjs.map +1 -1
- package/useAlert/index.js.map +1 -1
- package/useBlurCss/index.cjs.map +1 -1
- package/useBlurCss/index.js.map +1 -1
- package/useCorner/index.cjs.map +1 -1
- package/useCorner/index.js.map +1 -1
- package/useLayer/index.cjs.map +1 -1
- package/useLayer/index.js.map +1 -1
- package/useModal/index.cjs.map +1 -1
- package/useModal/index.js.map +1 -1
package/TableBody/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/TableBody/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/TableBody/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableBodyProps<T extends TagComponentType = \"tbody\"> = TagProps<T>\n\nconst TableBody = React.forwardRef(<T extends TagComponentType = \"tbody\">({ children, ...rest }: TableBodyProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n baseClass='table-body'\n component=\"tbody\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default TableBody"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAwC,EAAE,GAAmB,KAAI;AAAjE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACzF,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/TableBody/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TableBody/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TableBody/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableBodyProps<T extends TagComponentType = \"tbody\"> = TagProps<T>\n\nconst TableBody = React.forwardRef(<T extends TagComponentType = \"tbody\">({ children, ...rest }: TableBodyProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n baseClass='table-body'\n component=\"tbody\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default TableBody"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAwC,EAAE,GAAmB,KAAI;AAAjE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACzF,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/TableCell/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableColumnProps<T extends TagComponentType = \"td\"> = TagProps<T> & {\n th?: boolean\n}\n\nconst TableCell = React.forwardRef(<T extends TagComponentType = \"td\">({ children, th, ...rest }: TableColumnProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n verticalAlign: \"inherit\",\n textAlign: \"left\",\n fontSize: \"inherit\",\n color: \"text.primary\",\n ...((rest as any)?.sx || {})\n }}\n baseClass='table-cell'\n component={th ? \"th\" : \"td\"} ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default TableCell"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAA8C,EAAE,GAAmB,KAAI;QAAvE,EAAE,QAAQ,EAAE,EAAE,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAvB,kBAAyB,CAAF;AAC1F,IAAA,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,aAAa,EAAE,SAAS,EACxB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,cAAc,EAAA,GACjB,CAAC,IAAY,KAAA,IAAA,IAAZ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAU,EAAE,KAAI,EAAE,EAAC,EAEhC,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAEpC,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
package/TableCell/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TableCell/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableColumnProps<T extends TagComponentType = \"td\"> = TagProps<T> & {\n th?: boolean\n}\n\nconst TableCell = React.forwardRef(<T extends TagComponentType = \"td\">({ children, th, ...rest }: TableColumnProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n sxr={{\n verticalAlign: \"inherit\",\n textAlign: \"left\",\n fontSize: \"inherit\",\n color: \"text.primary\",\n ...((rest as any)?.sx || {})\n }}\n baseClass='table-cell'\n component={th ? \"th\" : \"td\"} ref={ref}\n >\n {children}\n </Tag>\n )\n})\n\nexport default TableCell"],"names":["_jsx"],"mappings":";;;;;AAQA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAA8C,EAAE,GAAmB,KAAI;QAAvE,EAAE,QAAQ,EAAE,EAAE,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAvB,kBAAyB,CAAF;AAC1F,IAAA,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACC,aAAa,EAAE,SAAS,EACxB,SAAS,EAAE,MAAM,EACjB,QAAQ,EAAE,SAAS,EACnB,KAAK,EAAE,cAAc,EAAA,GACjB,CAAC,IAAY,KAAA,IAAA,IAAZ,IAAI,KAAA,MAAA,GAAA,MAAA,GAAJ,IAAI,CAAU,EAAE,KAAI,EAAE,EAAC,EAEhC,SAAS,EAAC,YAAY,EACtB,SAAS,EAAE,EAAE,GAAG,IAAI,GAAG,IAAI,EAAE,GAAG,EAAE,GAAG,EAAA,QAAA,EAEpC,QAAQ,EAAA,CAAA,CACP;AAEd,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/TableFooter/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/TableFooter/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableFooterProps<T extends TagComponentType = \"tfoot\"> = TagProps<T>\n\nconst TableFooter = React.forwardRef(<T extends TagComponentType = \"tfoot\">({ children, ...rest }: TableFooterProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n baseClass='table-footer'\n component=\"tfoot\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default TableFooter"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IAC3F,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,cAAc,EACxB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/TableFooter/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TableFooter/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TableFooter/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableFooterProps<T extends TagComponentType = \"tfoot\"> = TagProps<T>\n\nconst TableFooter = React.forwardRef(<T extends TagComponentType = \"tfoot\">({ children, ...rest }: TableFooterProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n baseClass='table-footer'\n component=\"tfoot\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default TableFooter"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,WAAW,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAA0C,EAAE,GAAmB,KAAI;AAAnE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAgC,EAA3B,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IAC3F,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,cAAc,EACxB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/TableHead/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableHeadProps<T extends TagComponentType = \"thead\"> = TagProps<T>\n\nconst TableHead = React.forwardRef(<T extends TagComponentType = \"thead\">({ children, ...rest }: TableHeadProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n baseClass='table-head'\n component=\"thead\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default TableHead "],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAwC,EAAE,GAAmB,KAAI;AAAjE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACzF,QACIC,eAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
package/TableHead/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TableHead/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableHeadProps<T extends TagComponentType = \"thead\"> = TagProps<T>\n\nconst TableHead = React.forwardRef(<T extends TagComponentType = \"thead\">({ children, ...rest }: TableHeadProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n {...rest}\n baseClass='table-head'\n component=\"thead\"\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default TableHead "],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,SAAS,GAAG,KAAK,CAAC,UAAU,CAAC,CAAuC,EAAwC,EAAE,GAAmB,KAAI;AAAjE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA8B,EAAzB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACzF,QACIA,IAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EAAA,EACI,IAAI,EAAA,EACR,SAAS,EAAC,YAAY,EACtB,SAAS,EAAC,OAAO,EACjB,GAAG,EAAE,GAAG,EAAA,QAAA,EACV,QAAQ,EAAA,CAAA,CAAO;AAEzB,CAAC;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport Text from '../Text'\nimport Select, { SelectProps } from '../Select'\nimport Option from '../Option'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport React, { useMemo } from 'react'\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\n page: number;\n total: number;\n perpage?: number;\n perpages?: number[];\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n onChange?: (state: TablePaginationState) => void;\n\n slotProps?: {\n button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\n select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\n }\n}\n\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\n let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\n color ??= \"default\"\n variant ??= \"fill\"\n perpages ??= [30, 50, 100]\n perpage = perpage || perpages[0] as number\n const isPerpage = perpages[0] && perpages.length >= 1\n\n\n const chunks = useMemo(() => {\n const chunks: any = [];\n let _page = 1;\n for (let from = 0; from < total; from += perpage) {\n const to = Math.min(from + perpage, total)\n chunks[_page] = { from: from + 1, to, page: _page, perpage }\n _page++\n }\n return chunks\n }, [perpage, perpages, total])\n\n if (!chunks.length) {\n return <></>\n }\n\n const current = chunks[page] || chunks[1]\n const hasNext = !!chunks[page + 1]\n const hasPrev = !!chunks[page - 1]\n\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n gap: 1,\n alignItems: \"center\"\n }}\n baseClass='table-pagination'\n ref={ref}\n >\n {\n isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\n <Text fontSize=\"button\">PER PAGE</Text>\n <Select\n {...slotProps?.select}\n width={(perpage.toString().length * 10) + 60}\n minWidth={\"auto\"}\n maxWidth={\"auto\"}\n value={perpage}\n onChange={(value: any) => {\n onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\n }}\n >\n {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\n </Select>\n </Tag>\n }\n <Tag\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n gap: 1,\n alignItems: 'center'\n }}\n >\n <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\n <Text color=\"text.secondary\">of</Text>\n <Text fontSize=\"button\">{total}</Text>\n </Tag>\n <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\n <IconButton\n {...slotProps?.button}\n color={color}\n variant={variant}\n size={30}\n disabled={!hasPrev}\n onClick={() => {\n onChange && onChange(chunks[page - 1]);\n }}\n >\n <PrevIcon />\n </IconButton>\n <IconButton\n {...slotProps?.button}\n color={color}\n variant={variant}\n size={30}\n disabled={!hasNext}\n onClick={() => {\n onChange && onChange(chunks[page + 1]);\n }}\n >\n <NextIcon />\n </IconButton>\n </Tag>\n </Tag>\n )\n})\n\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TablePagination/index.tsx"],"sourcesContent":["\"use client\";\n\nimport Text from '../Text'\nimport Select, { SelectProps } from '../Select'\nimport Option from '../Option'\nimport IconButton, { IconButtonProps } from '../IconButton'\nimport React, { useMemo } from 'react'\nimport PrevIcon from '@xanui/icons/KeyboardArrowLeft'\nimport NextIcon from '@xanui/icons/KeyboardArrowRight'\nimport { TagProps, Tag, useInterface, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TablePaginationState = { page: number, perpage: number, from: number, to: number }\nexport type TablePaginationProps = Omit<TagProps, \"children\" | \"onChange\"> & {\n page: number;\n total: number;\n perpage?: number;\n perpages?: number[];\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n onChange?: (state: TablePaginationState) => void;\n\n slotProps?: {\n button?: Omit<IconButtonProps, \"children\" | \"color\" | \"variant\">;\n select?: Omit<SelectProps, \"value\" | \"onChange\" | \"children\">;\n }\n}\n\nconst TablePagination = React.forwardRef(({ page, total, perpage, onChange, ...rest }: TablePaginationProps, ref: React.Ref<any>) => {\n let [{ perpages, color, variant, slotProps, ...props }] = useInterface<any>(\"TablePagination\", rest, {})\n color ??= \"default\"\n variant ??= \"fill\"\n perpages ??= [30, 50, 100]\n perpage = perpage || perpages[0] as number\n const isPerpage = perpages[0] && perpages.length >= 1\n\n\n const chunks = useMemo(() => {\n const chunks: any = [];\n let _page = 1;\n for (let from = 0; from < total; from += perpage) {\n const to = Math.min(from + perpage, total)\n chunks[_page] = { from: from + 1, to, page: _page, perpage }\n _page++\n }\n return chunks\n }, [perpage, perpages, total])\n\n if (!chunks.length) {\n return <></>\n }\n\n const current = chunks[page] || chunks[1]\n const hasNext = !!chunks[page + 1]\n const hasPrev = !!chunks[page - 1]\n\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n gap: 1,\n alignItems: \"center\"\n }}\n baseClass='table-pagination'\n ref={ref}\n >\n {\n isPerpage && <Tag baseClass='table-pagination-perpage' flexBox flexRow gap={1} alignItems=\"center\">\n <Text fontSize=\"button\">PER PAGE</Text>\n <Select\n {...slotProps?.select}\n width={(perpage.toString().length * 10) + 60}\n minWidth={\"auto\"}\n maxWidth={\"auto\"}\n value={perpage}\n onChange={(value: any) => {\n onChange && onChange({ page: 1, perpage: value, from: 1, to: Math.min(value, total) })\n }}\n >\n {perpages.map((p: number) => <Option key={p} value={p}>{p}</Option>)}\n </Select>\n </Tag>\n }\n <Tag\n sxr={{\n display: \"flex\",\n flexDirection: \"row\",\n gap: 1,\n alignItems: 'center'\n }}\n >\n <Text fontSize=\"button\">{current?.from}-{current.to}</Text>\n <Text color=\"text.secondary\">of</Text>\n <Text fontSize=\"button\">{total}</Text>\n </Tag>\n <Tag baseClass='table-pagination-navigation' flexBox flexRow gap={.4} >\n <IconButton\n {...slotProps?.button}\n color={color}\n variant={variant}\n size={30}\n disabled={!hasPrev}\n onClick={() => {\n onChange && onChange(chunks[page - 1]);\n }}\n >\n <PrevIcon />\n </IconButton>\n <IconButton\n {...slotProps?.button}\n color={color}\n variant={variant}\n size={30}\n disabled={!hasNext}\n onClick={() => {\n onChange && onChange(chunks[page + 1]);\n }}\n >\n <NextIcon />\n </IconButton>\n </Tag>\n </Tag>\n )\n})\n\nexport default TablePagination"],"names":[],"mappings":";;;;;;;;;;;;AA4BA;AAA0C;;;;AAItC;AACA;AACA;AAGA;;;AAGI;AACI;AACA;AACA;;AAEJ;;AAGJ;AACI;;;;;AAOJ;AAIY;AACA;AACA;AACA;AACH;AAce;AACJ;AAQJ;AACA;AACA;AACA;AACH;;AAeG;;;AAmBpB;;"}
|
package/TableRow/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableRowProps<T extends TagComponentType = \"tr\"> = TagProps<T>\n\nconst TableRow = React.forwardRef(<T extends TagComponentType = \"tr\">({ children, ...rest }: TableRowProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n baseClass='table-row'\n verticalAlign=\"middle\"\n {...rest}\n component=\"tr\"\n ref={ref}>{children}</Tag>\n )\n})\n\nexport default TableRow"],"names":["__rest","_jsx","Tag"],"mappings":";;;;;;;AAMA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAuC,EAAE,GAAmB,KAAI;AAAhE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,QACIC,cAAA,CAACC,QAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,WAAW,EACrB,aAAa,EAAC,QAAQ,EAAA,EAClB,IAAI,EAAA,EACR,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAO;AAEtC,CAAC;;;;"}
|
package/TableRow/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/TableRow/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType } from '@xanui/core';\n\nexport type TableRowProps<T extends TagComponentType = \"tr\"> = TagProps<T>\n\nconst TableRow = React.forwardRef(<T extends TagComponentType = \"tr\">({ children, ...rest }: TableRowProps<T>, ref: React.Ref<any>) => {\n return (\n <Tag\n baseClass='table-row'\n verticalAlign=\"middle\"\n {...rest}\n component=\"tr\"\n ref={ref}>{children}</Tag>\n )\n})\n\nexport default TableRow"],"names":["_jsx"],"mappings":";;;;;AAMA,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,CAAoC,EAAuC,EAAE,GAAmB,KAAI;AAAhE,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAA6B,EAAxB,IAAI,GAAA,MAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACrF,QACIA,GAAA,CAAC,GAAG,EAAA,MAAA,CAAA,MAAA,CAAA,EACA,SAAS,EAAC,WAAW,EACrB,aAAa,EAAC,QAAQ,EAAA,EAClB,IAAI,EAAA,EACR,SAAS,EAAC,IAAI,EACd,GAAG,EAAE,GAAG,EAAA,QAAA,EAAG,QAAQ,EAAA,CAAA,CAAO;AAEtC,CAAC;;;;"}
|
package/Tabs/index.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","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;;"}
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport { TabProps } from '../Tab'\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\nimport { ButtonProps } from '../Button'\n\n\ntype ValueType = string | number\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\n value?: ValueType;\n onChange?: (value: ValueType) => void;\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n verticle?: useBreakpointPropsType<boolean>;\n disableTransition?: useBreakpointPropsType<boolean>;\n indicatorSize?: useBreakpointPropsType<number>;\n\n slotProps?: {\n content?: Omit<TagProps, \"children\">;\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\n }\n}\n\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\n const _rect: any = {};\n const parentRect = parent.getBoundingClientRect();\n const childRect = ele.getBoundingClientRect();\n _rect.top = childRect.top - parentRect.top;\n _rect.right = childRect.right - parentRect.right;\n _rect.bottom = childRect.bottom - parentRect.bottom;\n _rect.left = childRect.left - parentRect.left;\n _rect.width = childRect.width;\n _rect.height = childRect.height;\n return _rect\n}\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n const _p: any = {}\n if (variant) _p.variant = variant\n if (color) _p.color = color\n if (verticle) _p.verticle = verticle\n if (disableTransition) _p.disableTransition = disableTransition\n if (indicatorSize) _p.indicatorSize = indicatorSize\n const p: any = useBreakpointProps(_p)\n\n variant = p.variant ?? \"end-line\"\n color = p.color ?? \"brand\"\n verticle = p.verticle\n disableTransition = p.disableTransition\n indicatorSize = p.indicatorSize ?? 3\n\n ref = ref || useRef(null)\n const containerRef: any = useRef(null)\n const [trans, setTrans] = useState<any>()\n\n const { childs, selectedIndex } = useMemo(() => {\n let info: any = {\n childs: null,\n selectedIndex: 0\n }\n info.childs = Children.map(children, (child: any, idx: number) => {\n let selected = child.props.value === value\n if (selected) {\n info.selectedIndex = idx\n }\n\n let btnProps: any = {}\n if (variant === 'fill' && selected) {\n btnProps = {\n sx: {\n bgcolor: \"transparent!importnat\",\n color: \"#FFFFFF!important\"\n }\n }\n } else if (variant === 'soft' && selected) {\n btnProps = {\n sx: {\n bgcolor: \"transparent!importnat\",\n }\n }\n }\n\n // delete child.props.value\n return cloneElement(child, {\n corner: \"square\",\n value: undefined,\n onClick: () => {\n onChange && onChange(child.props.value)\n },\n ...slotProps?.button,\n ...btnProps,\n color: selected ? color : \"default\",\n variant: \"text\",\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\n })\n })\n return info\n }, [children, onChange, value, variant, color, verticle])\n\n useEffect(() => {\n let con = containerRef.current\n const conChilds = con.children\n if (conChilds && conChilds[selectedIndex]) {\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\n const prevRect = getRect(selectedTab, con)\n const rect = getRect(conChilds[selectedIndex], con)\n\n let anim: any = () => ({})\n if (verticle) {\n let v: any = {\n from: {\n top: prevRect?.top || 0,\n height: prevRect?.height || 0,\n },\n to: {\n top: rect?.top || 0,\n height: rect?.height || 0,\n }\n }\n\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n v.from.width = prevRect?.width\n v.to.width = rect?.width\n }\n anim = () => v\n } else {\n let v: any = {\n from: {\n left: prevRect?.left || 0,\n width: prevRect?.width || 0,\n },\n to: {\n left: rect?.left || 0,\n width: rect?.width || 0,\n },\n }\n\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n v.from.height = prevRect?.height || 0\n v.to.height = rect?.height || 0\n }\n anim = () => v\n }\n setTrans(() => anim)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedIndex, variant, color, verticle])\n\n let indicatorProps: any = useMemo(() => {\n let _indicatorProps: any = {}\n switch (variant) {\n case \"start-line\":\n if (verticle) {\n _indicatorProps = {\n left: 0,\n width: indicatorSize\n }\n } else {\n _indicatorProps = {\n top: 0,\n height: indicatorSize\n }\n }\n break;\n case \"end-line\":\n if (verticle) {\n _indicatorProps = {\n right: 0,\n width: indicatorSize\n }\n } else {\n _indicatorProps = {\n bottom: 0,\n height: indicatorSize\n }\n }\n break;\n case \"fill\":\n _indicatorProps = {\n top: 0,\n bgcolor: color\n }\n break;\n case \"outline\":\n _indicatorProps = {\n top: 0,\n border: \"1px solid\",\n borderColor: color,\n bgcolor: \"transparent\"\n }\n break;\n case \"soft\":\n _indicatorProps = {\n top: 0,\n bgcolor: `${color}.soft.primary`\n }\n break;\n case \"text\":\n _indicatorProps = {\n display: \"none\"\n }\n break;\n }\n return _indicatorProps\n }, [selectedIndex, variant, color, verticle])\n\n return (\n <Tag\n {...rest}\n baseClass='tabs'\n ref={ref}\n sxr={{\n position: \"relative\",\n zIndex: 1,\n display: \"inline-block\"\n }}\n >\n <Tag\n {...slotProps?.content}\n baseClass='tabs-content'\n sxr={{\n display: verticle ? \"flex\" : \"inline-flex\",\n flexDirection: verticle ? \"column\" : \"row\",\n }}\n ref={containerRef}\n >\n {childs}\n </Tag>\n <Transition\n open={!!trans}\n variant={trans}\n duration={trans ? (disableTransition ? 0 : 250) : 0}\n easing=\"smooth\"\n >\n <Tag\n baseClass='tabs-indicator'\n // className={classname}\n sxr={{\n position: \"absolute\",\n zIndex: -1,\n cursor: \"pointer\",\n bgcolor: color\n }}\n {...indicatorProps}\n >\n </Tag>\n </Transition>\n </Tag>\n )\n})\n\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/Tabs/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","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;;"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Tabs/index.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useEffect, ReactElement, useMemo, cloneElement, useState, Children, useRef } from 'react'\nimport { TabProps } from '../Tab'\nimport { Tag, TagProps, useBreakpointProps, UseColorTemplateColor, useInterface, useBreakpointPropsType, Transition } from '@xanui/core'\nimport { ButtonProps } from '../Button'\n\n\ntype ValueType = string | number\nexport type TabsProps = Omit<TagProps, 'onChange'> & {\n children: ReactElement<TabProps> | ReactElement<TabProps>[];\n value?: ValueType;\n onChange?: (value: ValueType) => void;\n variant?: useBreakpointPropsType<\"start-line\" | \"end-line\" | \"fill\" | \"outline\" | \"text\" | \"soft\">;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n verticle?: useBreakpointPropsType<boolean>;\n disableTransition?: useBreakpointPropsType<boolean>;\n indicatorSize?: useBreakpointPropsType<number>;\n\n slotProps?: {\n content?: Omit<TagProps, \"children\">;\n button?: Omit<ButtonProps, \"children\" | \"color\" | \"variant\" | \"classNames\">;\n }\n}\n\nconst getRect = (ele: HTMLElement, parent: HTMLElement) => {\n const _rect: any = {};\n const parentRect = parent.getBoundingClientRect();\n const childRect = ele.getBoundingClientRect();\n _rect.top = childRect.top - parentRect.top;\n _rect.right = childRect.right - parentRect.right;\n _rect.bottom = childRect.bottom - parentRect.bottom;\n _rect.left = childRect.left - parentRect.left;\n _rect.width = childRect.width;\n _rect.height = childRect.height;\n return _rect\n}\n\nconst Tabs = React.forwardRef(({ onChange, value, children, ...props }: TabsProps, ref: any) => {\n let [{ verticle, color, variant, indicatorSize, disableTransition, slotProps, ...rest }] = useInterface<any>(\"Tabs\", props, {})\n const _p: any = {}\n if (variant) _p.variant = variant\n if (color) _p.color = color\n if (verticle) _p.verticle = verticle\n if (disableTransition) _p.disableTransition = disableTransition\n if (indicatorSize) _p.indicatorSize = indicatorSize\n const p: any = useBreakpointProps(_p)\n\n variant = p.variant ?? \"end-line\"\n color = p.color ?? \"brand\"\n verticle = p.verticle\n disableTransition = p.disableTransition\n indicatorSize = p.indicatorSize ?? 3\n\n ref = ref || useRef(null)\n const containerRef: any = useRef(null)\n const [trans, setTrans] = useState<any>()\n\n const { childs, selectedIndex } = useMemo(() => {\n let info: any = {\n childs: null,\n selectedIndex: 0\n }\n info.childs = Children.map(children, (child: any, idx: number) => {\n let selected = child.props.value === value\n if (selected) {\n info.selectedIndex = idx\n }\n\n let btnProps: any = {}\n if (variant === 'fill' && selected) {\n btnProps = {\n sx: {\n bgcolor: \"transparent!importnat\",\n color: \"#FFFFFF!important\"\n }\n }\n } else if (variant === 'soft' && selected) {\n btnProps = {\n sx: {\n bgcolor: \"transparent!importnat\",\n }\n }\n }\n\n // delete child.props.value\n return cloneElement(child, {\n corner: \"square\",\n value: undefined,\n onClick: () => {\n onChange && onChange(child.props.value)\n },\n ...slotProps?.button,\n ...btnProps,\n color: selected ? color : \"default\",\n variant: \"text\",\n classNames: [child.props.classNames, { \"tab-selected\": selected }],\n })\n })\n return info\n }, [children, onChange, value, variant, color, verticle])\n\n useEffect(() => {\n let con = containerRef.current\n const conChilds = con.children\n if (conChilds && conChilds[selectedIndex]) {\n const selectedTab = con.querySelector(\".tab-selected\") || conChilds[0]\n const prevRect = getRect(selectedTab, con)\n const rect = getRect(conChilds[selectedIndex], con)\n\n let anim: any = () => ({})\n if (verticle) {\n let v: any = {\n from: {\n top: prevRect?.top || 0,\n height: prevRect?.height || 0,\n },\n to: {\n top: rect?.top || 0,\n height: rect?.height || 0,\n }\n }\n\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n v.from.width = prevRect?.width\n v.to.width = rect?.width\n }\n anim = () => v\n } else {\n let v: any = {\n from: {\n left: prevRect?.left || 0,\n width: prevRect?.width || 0,\n },\n to: {\n left: rect?.left || 0,\n width: rect?.width || 0,\n },\n }\n\n if ([\"fill\", \"soft\", \"outline\"].includes(variant)) {\n v.from.height = prevRect?.height || 0\n v.to.height = rect?.height || 0\n }\n anim = () => v\n }\n setTrans(() => anim)\n }\n // eslint-disable-next-line react-hooks/exhaustive-deps\n }, [selectedIndex, variant, color, verticle])\n\n let indicatorProps: any = useMemo(() => {\n let _indicatorProps: any = {}\n switch (variant) {\n case \"start-line\":\n if (verticle) {\n _indicatorProps = {\n left: 0,\n width: indicatorSize\n }\n } else {\n _indicatorProps = {\n top: 0,\n height: indicatorSize\n }\n }\n break;\n case \"end-line\":\n if (verticle) {\n _indicatorProps = {\n right: 0,\n width: indicatorSize\n }\n } else {\n _indicatorProps = {\n bottom: 0,\n height: indicatorSize\n }\n }\n break;\n case \"fill\":\n _indicatorProps = {\n top: 0,\n bgcolor: color\n }\n break;\n case \"outline\":\n _indicatorProps = {\n top: 0,\n border: \"1px solid\",\n borderColor: color,\n bgcolor: \"transparent\"\n }\n break;\n case \"soft\":\n _indicatorProps = {\n top: 0,\n bgcolor: `${color}.soft.primary`\n }\n break;\n case \"text\":\n _indicatorProps = {\n display: \"none\"\n }\n break;\n }\n return _indicatorProps\n }, [selectedIndex, variant, color, verticle])\n\n return (\n <Tag\n {...rest}\n baseClass='tabs'\n ref={ref}\n sxr={{\n position: \"relative\",\n zIndex: 1,\n display: \"inline-block\"\n }}\n >\n <Tag\n {...slotProps?.content}\n baseClass='tabs-content'\n sxr={{\n display: verticle ? \"flex\" : \"inline-flex\",\n flexDirection: verticle ? \"column\" : \"row\",\n }}\n ref={containerRef}\n >\n {childs}\n </Tag>\n <Transition\n open={!!trans}\n variant={trans}\n duration={trans ? (disableTransition ? 0 : 250) : 0}\n easing=\"smooth\"\n >\n <Tag\n baseClass='tabs-indicator'\n // className={classname}\n sxr={{\n position: \"absolute\",\n zIndex: -1,\n cursor: \"pointer\",\n bgcolor: color\n }}\n {...indicatorProps}\n >\n </Tag>\n </Transition>\n </Tag>\n )\n})\n\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.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Text/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n const _p: any = {}\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n variant = p.variant ?? 'text'\n\n return (\n <Tag\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n {...props}\n sxr={{\n fontSize: variant,\n lineHeight: variant,\n fontWeight: variant,\n color: \"text.primary\",\n }}\n baseClass='text'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Text\n"],"names":["__rest","useBreakpointProps","_jsx","Tag"],"mappings":";;;;;;;AASA,MAAM,IAAI,GAAG,KAAK,CAAC,UAAU,CAAC,CAAmC,EAA6C,EAAE,GAAoB,KAAI;;QAAvE,EAAE,QAAQ,EAAE,OAAO,EAAA,GAAA,EAA0B,EAArB,KAAK,GAAAA,YAAA,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,GAAQC,uBAAkB,CAAC,EAAE,CAAC;AACrC,IAAA,OAAO,GAAG,CAAA,EAAA,GAAA,CAAC,CAAC,OAAO,MAAA,IAAA,IAAA,EAAA,KAAA,MAAA,GAAA,EAAA,GAAI,MAAM;IAE7B,QACIC,cAAA,CAACC,QAAG,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/Text/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Text/index.tsx"],"sourcesContent":["\nimport React from 'react';\nimport { Tag, TagProps, TagComponentType, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type TextProps<T extends TagComponentType = \"p\"> = TagProps<T> & {\n variant?: useBreakpointPropsType<\"text\" | \"button\" | \"small\" | \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\">\n}\n\nconst Text = React.forwardRef(<T extends TagComponentType = \"p\">({ children, variant, ...props }: TextProps<T>, ref?: React.Ref<any>) => {\n const _p: any = {}\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n variant = p.variant ?? 'text'\n\n return (\n <Tag\n component={(variant as string).startsWith('h') ? variant as any : \"p\"}\n {...props}\n sxr={{\n fontSize: variant,\n lineHeight: variant,\n fontWeight: variant,\n color: \"text.primary\",\n }}\n baseClass='text'\n ref={ref}\n >{children}</Tag>\n )\n})\n\nexport default Text\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.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createRoot } from \"react-dom/client\";\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n >\n <Alert\n shadow={2}\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n clearTimeout(timer)\n }}\n onMouseLeave={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n onClose={closeable ? () => {\n setOpen(false)\n } : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst Toast = (props?: string | UseToastProps) => {\n if (typeof props === \"string\") {\n props = { content: props }\n }\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\n const { sx } = formatPacement(placement)\n\n const wrapperContainerClassName = `xui-toast-container-${placement}`\n const wrapperClassName = `xui-toast-list-${placement}`\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (!wrapperEle) {\n wrapperEle = document.createElement('div')\n wrapperEle.className = wrapperContainerClassName\n const appRoot = appRootElement()\n appRoot.appendChild(wrapperEle)\n\n const wrapperRoot = createRoot(wrapperEle);\n wrapperRoot.render(<Scrollbar\n p={1}\n overflow=\"hidden\"\n className={wrapperClassName}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 320,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n </Scrollbar>);\n }\n\n setTimeout(() => {\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\n const div = document.createElement('div');\n wrapper.appendChild(div);\n const root = createRoot(div);\n\n root.render(<ToastView\n placement={placement}\n content={content}\n closeable={closeable}\n {...rest}\n onClosed={() => {\n root.unmount();\n wrapper.removeChild(div);\n if (wrapper.children.length === 0) {\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (container) {\n appRootElement().removeChild(container);\n }\n }\n }}\n />);\n }, 5);\n\n}\n\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/Toast/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Toast/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { createRoot } from \"react-dom/client\";\nimport { appRootElement, UseColorTemplateColor, UseColorTemplateType, Transition, useBreakpointPropsType } from \"@xanui/core\";\nimport React, { ReactElement } from \"react\";\nimport Alert, { AlertProps } from \"../Alert\";\nimport Scrollbar from \"../Scrollbar\";\n\ntype PlacementType = \"top-left\" | \"top-center\" | \"top-right\" | \"bottom-left\" | \"bottom-center\" | \"bottom-right\"\n\nexport type UseToastProps = {\n title?: useBreakpointPropsType<string | ReactElement>;\n content?: AlertProps['children'];\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n icon?: useBreakpointPropsType<\"info\" | \"warning\" | \"success\" | \"error\" | false | ReactElement>;\n placement?: PlacementType;\n closeable?: useBreakpointPropsType<boolean>;\n}\n\n\nconst formatPacement = (placement: PlacementType) => {\n let sx: any = {}\n let transition: any = \"\"\n switch (placement) {\n case \"top-left\":\n sx = {\n top: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"top-right\":\n sx = {\n top: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"top-center\":\n sx = {\n top: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeDown\"\n break;\n case \"bottom-right\":\n sx = {\n bottom: 0,\n right: 0\n }\n transition = \"fadeLeft\"\n break;\n case \"bottom-left\":\n sx = {\n bottom: 0,\n left: 0\n }\n transition = \"fadeRight\"\n break;\n case \"bottom-center\":\n sx = {\n bottom: 0,\n left: \"50%\",\n transform: \"translateX(-50%)\"\n }\n transition = \"fadeUp\"\n break;\n }\n return { sx, transition }\n}\n\nconst ToastView = (props: UseToastProps & { onClosed: () => void }) => {\n const [open, setOpen] = React.useState(true)\n const [timer, setTimer] = React.useState<any>(null)\n const { placement = \"bottom-right\", content, closeable, onClosed, ...rest } = props || {}\n const { transition } = formatPacement(placement)\n\n return (<Transition\n open={open}\n variant={transition}\n onClosed={() => {\n onClosed()\n }}\n onOpened={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n >\n <Alert\n shadow={2}\n variant=\"fill\"\n color=\"brand\"\n {...rest as any}\n mode=\"item\"\n mb={1}\n onMouseEnter={() => {\n clearTimeout(timer)\n }}\n onMouseLeave={() => {\n setTimer(setTimeout(() => {\n setOpen(false)\n }, 6000))\n }}\n onClose={closeable ? () => {\n setOpen(false)\n } : undefined}\n >{content}</Alert>\n </Transition>)\n}\n\nconst Toast = (props?: string | UseToastProps) => {\n if (typeof props === \"string\") {\n props = { content: props }\n }\n let { placement = \"bottom-right\", content, closeable, ...rest } = props || {}\n const { sx } = formatPacement(placement)\n\n const wrapperContainerClassName = `xui-toast-container-${placement}`\n const wrapperClassName = `xui-toast-list-${placement}`\n let wrapperEle = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (!wrapperEle) {\n wrapperEle = document.createElement('div')\n wrapperEle.className = wrapperContainerClassName\n const appRoot = appRootElement()\n appRoot.appendChild(wrapperEle)\n\n const wrapperRoot = createRoot(wrapperEle);\n wrapperRoot.render(<Scrollbar\n p={1}\n overflow=\"hidden\"\n className={wrapperClassName}\n sx={{\n position: \"fixed\",\n zIndex: 99999999,\n display: \"flex\",\n justifyContent: \"flex-end\",\n flexDirection: \"column\",\n width: 320,\n height: \"auto\",\n maxHeight: \"100vh\",\n ...sx\n }}\n >\n\n </Scrollbar>);\n }\n\n setTimeout(() => {\n const wrapper = document.querySelector(`.${wrapperClassName}`) as HTMLElement;\n const div = document.createElement('div');\n wrapper.appendChild(div);\n const root = createRoot(div);\n\n root.render(<ToastView\n placement={placement}\n content={content}\n closeable={closeable}\n {...rest}\n onClosed={() => {\n root.unmount();\n wrapper.removeChild(div);\n if (wrapper.children.length === 0) {\n const container = document.querySelector(`.${wrapperContainerClassName}`) as HTMLElement\n if (container) {\n appRootElement().removeChild(container);\n }\n }\n }}\n />);\n }, 5);\n\n}\n\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.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n children: ReactElement;\n title: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n const [target, setTarget] = useState<any>()\n const _p: any = {}\n if (title) _p.title = title\n if (color) _p.color = color\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n title = p.title\n color = p.color ?? \"default\"\n variant = p.variant ?? \"fill\"\n placement ??= \"bottom\"\n\n const template = useColorTemplate(color as any, variant as any)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n const first: any = Children.toArray(children).shift();\n const child = cloneElement(first, {\n onMouseEnter: (e) => {\n setTarget(e.target)\n },\n onMouseLeave: () => setTarget(null)\n })\n\n\n return (\n <>\n {child}\n <Menu\n target={target}\n placement={placement}\n slotProps={{\n content: {\n p: .5,\n shadow: 1,\n ...template.primary,\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\n }\n }}\n >\n {title as any}\n </Menu>\n </>\n )\n}\n\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/Tooltip/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/Tooltip/index.tsx"],"sourcesContent":["\"use client\";\n\nimport { Children, cloneElement, ReactElement, useState } from 'react'\nimport Menu, { MenuProps } from '../Menu'\nimport { useBreakpointProps, useColorTemplate, UseColorTemplateColor, UseColorTemplateType, useBreakpointPropsType } from '@xanui/core'\n\n\nexport type TooltipProps = {\n children: ReactElement;\n title: useBreakpointPropsType<string>;\n color?: useBreakpointPropsType<UseColorTemplateColor>;\n variant?: useBreakpointPropsType<UseColorTemplateType>;\n placement?: MenuProps['placement']\n}\n\nconst Tooltip = ({ children, title, variant, color, placement }: TooltipProps) => {\n const [target, setTarget] = useState<any>()\n const _p: any = {}\n if (title) _p.title = title\n if (color) _p.color = color\n if (variant) _p.variant = variant\n const p: any = useBreakpointProps(_p)\n title = p.title\n color = p.color ?? \"default\"\n variant = p.variant ?? \"fill\"\n placement ??= \"bottom\"\n\n const template = useColorTemplate(color as any, variant as any)\n if (!children || Array.isArray(children)) throw new Error(\"Invalid children in Toast\")\n const first: any = Children.toArray(children).shift();\n const child = cloneElement(first, {\n onMouseEnter: (e) => {\n setTarget(e.target)\n },\n onMouseLeave: () => setTarget(null)\n })\n\n\n return (\n <>\n {child}\n <Menu\n target={target}\n placement={placement}\n slotProps={{\n content: {\n p: .5,\n shadow: 1,\n ...template.primary,\n bgcolor: color == \"default\" ? \"background.primary\" : template.primary.bgcolor,\n }\n }}\n >\n {title as any}\n </Menu>\n </>\n )\n}\n\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.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n startContent?: useBreakpointPropsType<ReactElement>;\n endContent?: useBreakpointPropsType<ReactElement>;\n horizental?: useBreakpointPropsType<boolean>;\n slotProps?: {\n scrollbar?: Omit<ScrollbarProps, 'children'>;\n }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n const _p: any = {}\n if (startContent) _p.startContent = startContent\n if (endContent) _p.endContent = endContent\n if (horizental) _p.horizental = horizental\n const p: any = useBreakpointProps(_p)\n startContent = p.startContent\n endContent = p.endContent\n horizental = p.horizental\n\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n justifyContent: \"space-between\",\n flexDirection: horizental ? \"row\" : \"column\"\n }}\n baseClass='viewbox'\n ref={ref}\n >\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n <Scrollbar\n {...slotProps?.scrollbar}\n className='viewbox-content'\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: horizental ? \"row\" : \"column\",\n ...(slotProps?.scrollbar?.style || {})\n }}\n >\n {children}\n </Scrollbar>\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n </Tag>\n )\n})\n\nexport default ViewBox\n"],"names":["__rest","useInterface","useBreakpointProps","_jsxs","Tag","_jsx","Scrollbar"],"mappings":";;;;;;;;AAgBA,MAAM,OAAO,GAAG,KAAK,CAAC,UAAU,CAAC,CAAC,EAAmC,EAAE,GAAS,KAAI;;AAAlD,IAAA,IAAA,EAAE,QAAQ,EAAA,GAAA,EAAyB,EAApB,IAAI,GAAAA,YAAA,CAAA,EAAA,EAAnB,YAAqB,CAAF;IACjD,IAAI,CAAA,EAAA,CAAA,GAAkEC,iBAAY,CAAM,SAAS,EAAE,IAAI,EAAE,EAAE,CAAC,EAAvG,EAAE,YAAY,EAAE,UAAU,EAAE,SAAS,EAAE,UAAU,EAAA,GAAA,EAAY,EAAP,KAAK,GAAAD,YAAA,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,GAAQE,uBAAkB,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,QACIC,eAAA,CAACC,QAAG,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,cAAA,CAACD,QAAG,EAAA,EAAC,SAAS,EAAC,uBAAuB,EAAC,OAAO,EAAA,IAAA,EAAC,aAAa,EAAE,UAAU,GAAG,KAAK,GAAG,QAAQ,EAAA,QAAA,EAAG,YAAY,EAAA,CAAO,EAClIC,cAAA,CAACC,KAAS,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,IAAID,cAAA,CAACD,QAAG,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/ViewBox/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/ViewBox/index.tsx"],"sourcesContent":["\nimport React, { ReactElement } from 'react'\nimport Scrollbar, { ScrollbarProps } from '../Scrollbar'\nimport { Tag, TagProps, TagComponentType, useInterface, useBreakpointProps, useBreakpointPropsType } from '@xanui/core';\n\n\nexport type ViewBoxProps<T extends TagComponentType = \"div\"> = TagProps<T> & {\n startContent?: useBreakpointPropsType<ReactElement>;\n endContent?: useBreakpointPropsType<ReactElement>;\n horizental?: useBreakpointPropsType<boolean>;\n slotProps?: {\n scrollbar?: Omit<ScrollbarProps, 'children'>;\n }\n}\n\n\nconst ViewBox = React.forwardRef(({ children, ...rest }: ViewBoxProps, ref?: any) => {\n let [{ startContent, endContent, slotProps, horizental, ...props }] = useInterface<any>(\"ViewBox\", rest, {})\n const _p: any = {}\n if (startContent) _p.startContent = startContent\n if (endContent) _p.endContent = endContent\n if (horizental) _p.horizental = horizental\n const p: any = useBreakpointProps(_p)\n startContent = p.startContent\n endContent = p.endContent\n horizental = p.horizental\n\n return (\n <Tag\n {...props}\n sxr={{\n display: \"flex\",\n justifyContent: \"space-between\",\n flexDirection: horizental ? \"row\" : \"column\"\n }}\n baseClass='viewbox'\n ref={ref}\n >\n {startContent && <Tag baseClass='viewbox-start-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{startContent}</Tag>}\n <Scrollbar\n {...slotProps?.scrollbar}\n className='viewbox-content'\n style={{\n flex: 1,\n display: \"flex\",\n flexDirection: horizental ? \"row\" : \"column\",\n ...(slotProps?.scrollbar?.style || {})\n }}\n >\n {children}\n </Scrollbar>\n {endContent && <Tag baseClass='viewbox-end-content' flexBox flexDirection={horizental ? \"row\" : \"column\"}>{endContent}</Tag>}\n </Tag>\n )\n})\n\nexport default ViewBox\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;;;;"}
|