diff --git a/kitchen-sink/react/pages/DataTable.jsx b/kitchen-sink/react/pages/DataTable.jsx new file mode 100644 index 00000000..28936b0e --- /dev/null +++ b/kitchen-sink/react/pages/DataTable.jsx @@ -0,0 +1,130 @@ +import React from 'react'; +import { + Page, + Navbar, + NavbarBackLink, + BlockTitle, + Card, + Table, + TableHead, + TableBody, + TableCell, + TableRow, +} from 'konsta/react'; + +export default function DataTablePage() { + const isPreview = document.location.href.includes('examplePreview'); + return ( + + history.back()} />} + /> + Plain table +
+ + + + Dessert (100g serving) + + Calories + + + Fat (g) + + + Carbs + + + Protein (g) + + + + + + Frozen yogurt + 159 + 6.0 + 24 + 4.0 + + + Ice cream sandwich + 237 + 9.0 + 37 + 4.4 + + + Eclair + 262 + 16.0 + 24 + 6.0 + + + Cupcake + 305 + 3.7 + 67 + 4.3 + + +
+
+ Within card + + + + + Dessert (100g serving) + + Calories + + + Fat (g) + + + Carbs + + + Protein (g) + + + + + + Frozen yogurt + 159 + 6.0 + 24 + 4.0 + + + Ice cream sandwich + 237 + 9.0 + 37 + 4.4 + + + Eclair + 262 + 16.0 + 24 + 6.0 + + + Cupcake + 305 + 3.7 + 67 + 4.3 + + +
+ + + ); +} +DataTablePage.displayName = 'DataTablePage'; diff --git a/kitchen-sink/react/routes.js b/kitchen-sink/react/routes.js index 7eb657f4..c0c1e060 100644 --- a/kitchen-sink/react/routes.js +++ b/kitchen-sink/react/routes.js @@ -7,6 +7,7 @@ import Checkbox from './pages/Checkbox.jsx'; import Chips from './pages/Chips.jsx'; import ContactsList from './pages/ContactsList.jsx'; import ContentBlock from './pages/ContentBlock.jsx'; +import DataTable from './pages/DataTable.jsx'; import Dialog from './pages/Dialog.jsx'; import Fab from './pages/Fab.jsx'; import FormInputs from './pages/FormInputs.jsx'; @@ -43,6 +44,7 @@ const routes = [ Chips, ContactsList, ContentBlock, + DataTable, Dialog, Fab, FormInputs, diff --git a/kitchen-sink/svelte/pages/DataTable.svelte b/kitchen-sink/svelte/pages/DataTable.svelte new file mode 100644 index 00000000..fc69bca7 --- /dev/null +++ b/kitchen-sink/svelte/pages/DataTable.svelte @@ -0,0 +1,129 @@ + + + + + {#if !isPreview} + history.back()} /> + {/if} + + + Plain table +
+ + + + Dessert (100g serving) + + Calories + + + Fat (g) + + + Carbs + + + Protein (g) + + + + + + Frozen yogurt + 159 + 6.0 + 24 + 4.0 + + + Ice cream sandwich + 237 + 9.0 + 37 + 4.4 + + + Eclair + 262 + 16.0 + 24 + 6.0 + + + Cupcake + 305 + 3.7 + 67 + 4.3 + + +
+
+ Within card + + + + + Dessert (100g serving) + + Calories + + + Fat (g) + + + Carbs + + + Protein (g) + + + + + + Frozen yogurt + 159 + 6.0 + 24 + 4.0 + + + Ice cream sandwich + 237 + 9.0 + 37 + 4.4 + + + Eclair + 262 + 16.0 + 24 + 6.0 + + + Cupcake + 305 + 3.7 + 67 + 4.3 + + +
+ + diff --git a/kitchen-sink/svelte/routes.js b/kitchen-sink/svelte/routes.js index ea5f1fb3..94017ade 100644 --- a/kitchen-sink/svelte/routes.js +++ b/kitchen-sink/svelte/routes.js @@ -7,6 +7,7 @@ import Checkbox from './pages/Checkbox.svelte'; import Chips from './pages/Chips.svelte'; import ContactsList from './pages/ContactsList.svelte'; import ContentBlock from './pages/ContentBlock.svelte'; +import DataTable from './pages/DataTable.svelte'; import Dialog from './pages/Dialog.svelte'; import Fab from './pages/Fab.svelte'; import FormInputs from './pages/FormInputs.svelte'; @@ -43,6 +44,7 @@ const pages = { Chips, ContactsList, ContentBlock, + DataTable, Dialog, Fab, FormInputs, diff --git a/kitchen-sink/vue/pages/DataTable.vue b/kitchen-sink/vue/pages/DataTable.vue new file mode 100644 index 00000000..f370e344 --- /dev/null +++ b/kitchen-sink/vue/pages/DataTable.vue @@ -0,0 +1,133 @@ + + diff --git a/kitchen-sink/vue/routes.js b/kitchen-sink/vue/routes.js index 5bdbacfc..cb2959b2 100644 --- a/kitchen-sink/vue/routes.js +++ b/kitchen-sink/vue/routes.js @@ -8,6 +8,7 @@ import Checkbox from './pages/Checkbox.vue'; import Chips from './pages/Chips.vue'; import ContactsList from './pages/ContactsList.vue'; import ContentBlock from './pages/ContentBlock.vue'; +import DataTable from './pages/DataTable.vue'; import Dialog from './pages/Dialog.vue'; import Fab from './pages/Fab.vue'; import FormInputs from './pages/FormInputs.vue'; @@ -45,6 +46,7 @@ const routes = [ Chips, ContactsList, ContentBlock, + DataTable, Dialog, Fab, FormInputs, diff --git a/src/react/components/Table.jsx b/src/react/components/Table.jsx new file mode 100644 index 00000000..76b1f686 --- /dev/null +++ b/src/react/components/Table.jsx @@ -0,0 +1,38 @@ +import React, { useRef, forwardRef, useImperativeHandle } from 'react'; +import { useThemeClasses } from '../shared/use-theme-classes.js'; +import { TableClasses } from '../../shared/classes/TableClasses.js'; + +const Table = forwardRef((props, ref) => { + const { + className, + + ios, + material, + + children, + + ...rest + } = props; + + const elRef = useRef(null); + + useImperativeHandle(ref, () => ({ + el: elRef.current, + })); + + const themeClasses = useThemeClasses({ ios, material }); + const c = themeClasses(TableClasses({ ...props })); + + const attrs = { + ...rest, + }; + + return ( + + {children} +
+ ); +}); + +Table.displayName = 'Table'; +export default Table; diff --git a/src/react/components/TableBody.jsx b/src/react/components/TableBody.jsx new file mode 100644 index 00000000..ac54a145 --- /dev/null +++ b/src/react/components/TableBody.jsx @@ -0,0 +1,39 @@ +import React, { useRef, forwardRef, useImperativeHandle } from 'react'; +import { useThemeClasses } from '../shared/use-theme-classes.js'; +import { TableBodyClasses } from '../../shared/classes/TableBodyClasses.js'; + +const TableBody = forwardRef((props, ref) => { + const { + className, + + ios, + material, + + children, + + ...rest + } = props; + + const elRef = useRef(null); + + useImperativeHandle(ref, () => ({ + el: elRef.current, + })); + + const themeClasses = useThemeClasses({ ios, material }); + + const c = themeClasses(TableBodyClasses({ ...props })); + + const attrs = { + ...rest, + }; + + return ( + + {children} + + ); +}); + +TableBody.displayName = 'TableBody'; +export default TableBody; diff --git a/src/react/components/TableCell.jsx b/src/react/components/TableCell.jsx new file mode 100644 index 00000000..88bfe65a --- /dev/null +++ b/src/react/components/TableCell.jsx @@ -0,0 +1,48 @@ +import React, { useRef, forwardRef, useImperativeHandle } from 'react'; +import { useThemeClasses } from '../shared/use-theme-classes.js'; +import { useDarkClasses } from '../shared/use-dark-classes.js'; +import { TableCellClasses } from '../../shared/classes/TableCellClasses.js'; +import { TableCellColors } from '../../shared/colors/TableCellColors.js'; + +const TableCell = forwardRef((props, ref) => { + const { + className, + colors: colorsProp, + + header, + + ios, + material, + + children, + + ...rest + } = props; + + const elRef = useRef(null); + + useImperativeHandle(ref, () => ({ + el: elRef.current, + })); + + const Component = header ? 'th' : 'td'; + + const themeClasses = useThemeClasses({ ios, material }); + const dark = useDarkClasses(); + const colors = TableCellColors(colorsProp, dark); + + const c = themeClasses(TableCellClasses({ ...props }, colors, className)); + + const attrs = { + ...rest, + }; + + return ( + + {children} + + ); +}); + +TableCell.displayName = 'TableCell'; +export default TableCell; diff --git a/src/react/components/TableHead.jsx b/src/react/components/TableHead.jsx new file mode 100644 index 00000000..1971c2de --- /dev/null +++ b/src/react/components/TableHead.jsx @@ -0,0 +1,38 @@ +import React, { useRef, forwardRef, useImperativeHandle } from 'react'; +import { useThemeClasses } from '../shared/use-theme-classes.js'; +import { TableHeadClasses } from '../../shared/classes/TableHeadClasses.js'; + +const TableHead = forwardRef((props, ref) => { + const { + className, + + ios, + material, + + children, + + ...rest + } = props; + + const elRef = useRef(null); + + useImperativeHandle(ref, () => ({ + el: elRef.current, + })); + + const themeClasses = useThemeClasses({ ios, material }); + const c = themeClasses(TableHeadClasses({ ...props })); + + const attrs = { + ...rest, + }; + + return ( + + {children} + + ); +}); + +TableHead.displayName = 'TableHead'; +export default TableHead; diff --git a/src/react/components/TableRow.jsx b/src/react/components/TableRow.jsx new file mode 100644 index 00000000..58ab4644 --- /dev/null +++ b/src/react/components/TableRow.jsx @@ -0,0 +1,46 @@ +import React, { useRef, forwardRef, useImperativeHandle } from 'react'; +import { useThemeClasses } from '../shared/use-theme-classes.js'; +import { useDarkClasses } from '../shared/use-dark-classes.js'; +import { TableRowClasses } from '../../shared/classes/TableRowClasses.js'; +import { TableRowColors } from '../../shared/colors/TableRowColors.js'; + +const TableRow = forwardRef((props, ref) => { + const { + className, + colors: colorsProp, + + header, + + ios, + material, + + children, + + ...rest + } = props; + + const elRef = useRef(null); + + useImperativeHandle(ref, () => ({ + el: elRef.current, + })); + + const themeClasses = useThemeClasses({ ios, material }); + const dark = useDarkClasses(); + const colors = TableRowColors(colorsProp, dark); + + const c = themeClasses(TableRowClasses({ ...props }, colors)); + + const attrs = { + ...rest, + }; + + return ( + + {children} + + ); +}); + +TableRow.displayName = 'TableRow'; +export default TableRow; diff --git a/src/react/konsta-react.js b/src/react/konsta-react.js index 422fa8df..080b4582 100644 --- a/src/react/konsta-react.js +++ b/src/react/konsta-react.js @@ -50,6 +50,11 @@ import Sheet from './components/Sheet.jsx'; import Stepper from './components/Stepper.jsx'; import Tabbar from './components/Tabbar.jsx'; import TabbarLink from './components/TabbarLink.jsx'; +import Table from './components/Table.jsx'; +import TableBody from './components/TableBody.jsx'; +import TableCell from './components/TableCell.jsx'; +import TableHead from './components/TableHead.jsx'; +import TableRow from './components/TableRow.jsx'; import Toast from './components/Toast.jsx'; import Toggle from './components/Toggle.jsx'; import Toolbar from './components/Toolbar.jsx'; @@ -116,6 +121,11 @@ export { Stepper, Tabbar, TabbarLink, + Table, + TableBody, + TableCell, + TableHead, + TableRow, Toast, Toggle, Toolbar, diff --git a/src/shared/classes/TableBodyClasses.js b/src/shared/classes/TableBodyClasses.js new file mode 100644 index 00000000..07380a83 --- /dev/null +++ b/src/shared/classes/TableBodyClasses.js @@ -0,0 +1,9 @@ +export const TableBodyClasses = () => { + return { + base: { + common: 'text-sm', + ios: '', + material: ``, + }, + }; +}; diff --git a/src/shared/classes/TableCellClasses.js b/src/shared/classes/TableCellClasses.js new file mode 100644 index 00000000..b00bd997 --- /dev/null +++ b/src/shared/classes/TableCellClasses.js @@ -0,0 +1,20 @@ +import { cls } from '../cls.js'; + +export const TableCellClasses = (props, colors, classes) => { + const { header } = props; + return { + base: { + common: cls('align-middle', classes), + ios: cls( + header + ? `text-xs font-semibold overflow-hidden whitespace-nowrap leading-4 h-11 bg-transparent ${colors.textHeaderIos} py-0 px-4` + : `h-11 relative py-0 px-4` + ), + material: cls( + header + ? `${colors.textHeaderMaterial} px-6 py-0 text-xs font-medium overflow-hidden text-ellipsis whitespace-nowrap leading-4 h-14 bg-transparent` + : `py-0 first:px-6 px-7 h-12` + ), + }, + }; +}; diff --git a/src/shared/classes/TableClasses.js b/src/shared/classes/TableClasses.js new file mode 100644 index 00000000..e74a7ca5 --- /dev/null +++ b/src/shared/classes/TableClasses.js @@ -0,0 +1,9 @@ +export const TableClasses = () => { + return { + base: { + common: 'w-full border-none p-0 m-0 border-collapse text-left table', + ios: '', + material: ``, + }, + }; +}; diff --git a/src/shared/classes/TableHeadClasses.js b/src/shared/classes/TableHeadClasses.js new file mode 100644 index 00000000..b81a5ddd --- /dev/null +++ b/src/shared/classes/TableHeadClasses.js @@ -0,0 +1,9 @@ +export const TableHeadClasses = () => { + return { + base: { + common: 'align-middle relative', + ios: 'hairline-b', + material: '', + }, + }; +}; diff --git a/src/shared/classes/TableRowClasses.js b/src/shared/classes/TableRowClasses.js new file mode 100644 index 00000000..4c120a70 --- /dev/null +++ b/src/shared/classes/TableRowClasses.js @@ -0,0 +1,16 @@ +import { cls } from '../cls.js'; + +export const TableRowClasses = (props, colors) => { + const { header } = props; + return { + base: { + common: 'align-middle relative', + ios: header + ? '' + : cls(colors.bgIos, 'hairline-b last:hairline-transparent'), + material: header + ? '' + : cls(colors.bgMaterial, `border-t ${colors.dividerMaterial}`), + }, + }; +}; diff --git a/src/shared/colors/TableCellColors.js b/src/shared/colors/TableCellColors.js new file mode 100644 index 00000000..70410e6e --- /dev/null +++ b/src/shared/colors/TableCellColors.js @@ -0,0 +1,12 @@ +import { cls } from '../cls.js'; + +export const TableCellColors = (colorsProp = {}, dark) => { + return { + textHeaderIos: cls('text-black/45', dark('dark:text-white/55')), + textHeaderMaterial: cls( + 'text-md-light-on-surface-variant', + dark('dark:text-md-dark-on-surface-variant') + ), + ...colorsProp, + }; +}; diff --git a/src/shared/colors/TableRowColors.js b/src/shared/colors/TableRowColors.js new file mode 100644 index 00000000..724f0eed --- /dev/null +++ b/src/shared/colors/TableRowColors.js @@ -0,0 +1,16 @@ +import { cls } from '../cls.js'; + +export const TableRowColors = (colorsProp = {}, dark) => { + return { + bgIos: cls('hover:bg-black/5', dark('dark:hover:bg-white/10')), + bgMaterial: cls( + 'hover:bg-md-light-secondary-container', + dark('dark:hover:bg-md-dark-secondary-container') + ), + dividerMaterial: cls( + 'border-md-light-outline', + dark('dark:border-md-dark-outline') + ), + ...colorsProp, + }; +}; diff --git a/src/svelte/components/Table.svelte b/src/svelte/components/Table.svelte new file mode 100644 index 00000000..55667cd1 --- /dev/null +++ b/src/svelte/components/Table.svelte @@ -0,0 +1,26 @@ + + + +
diff --git a/src/svelte/components/TableBody.svelte b/src/svelte/components/TableBody.svelte new file mode 100644 index 00000000..ae2b6c71 --- /dev/null +++ b/src/svelte/components/TableBody.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/src/svelte/components/TableCell.svelte b/src/svelte/components/TableCell.svelte new file mode 100644 index 00000000..53b84a0f --- /dev/null +++ b/src/svelte/components/TableCell.svelte @@ -0,0 +1,35 @@ + + + + diff --git a/src/svelte/components/TableHead.svelte b/src/svelte/components/TableHead.svelte new file mode 100644 index 00000000..bbe0cd12 --- /dev/null +++ b/src/svelte/components/TableHead.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/src/svelte/components/TableRow.svelte b/src/svelte/components/TableRow.svelte new file mode 100644 index 00000000..7592e5fe --- /dev/null +++ b/src/svelte/components/TableRow.svelte @@ -0,0 +1,34 @@ + + + + diff --git a/src/svelte/konsta-svelte.js b/src/svelte/konsta-svelte.js index 16119b0c..5c77c188 100644 --- a/src/svelte/konsta-svelte.js +++ b/src/svelte/konsta-svelte.js @@ -50,6 +50,11 @@ import Sheet from './components/Sheet.svelte'; import Stepper from './components/Stepper.svelte'; import Tabbar from './components/Tabbar.svelte'; import TabbarLink from './components/TabbarLink.svelte'; +import Table from './components/Table.svelte'; +import TableBody from './components/TableBody.svelte'; +import TableCell from './components/TableCell.svelte'; +import TableHead from './components/TableHead.svelte'; +import TableRow from './components/TableRow.svelte'; import Toast from './components/Toast.svelte'; import Toggle from './components/Toggle.svelte'; import Toolbar from './components/Toolbar.svelte'; @@ -114,6 +119,11 @@ export { Stepper, Tabbar, TabbarLink, + Table, + TableBody, + TableCell, + TableHead, + TableRow, Toast, Toggle, Toolbar, diff --git a/src/types/Table.d.ts b/src/types/Table.d.ts new file mode 100644 index 00000000..36587c94 --- /dev/null +++ b/src/types/Table.d.ts @@ -0,0 +1 @@ +interface Props {} diff --git a/src/types/TableBody.d.ts b/src/types/TableBody.d.ts new file mode 100644 index 00000000..36587c94 --- /dev/null +++ b/src/types/TableBody.d.ts @@ -0,0 +1 @@ +interface Props {} diff --git a/src/types/TableCell.d.ts b/src/types/TableCell.d.ts new file mode 100644 index 00000000..11a6d702 --- /dev/null +++ b/src/types/TableCell.d.ts @@ -0,0 +1,23 @@ +interface Props { + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Table Cell header text color + * + * @default 'text-black/45 dark:text-white/55' + */ + textHeaderIos?: string; + /** + * Table Cell header text color + * + * @default 'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant' + */ + textHeaderMaterial?: string; + }; + /** + * Is located inside the TableHead + */ + header?: boolean; +} diff --git a/src/types/TableHead.d.ts b/src/types/TableHead.d.ts new file mode 100644 index 00000000..36587c94 --- /dev/null +++ b/src/types/TableHead.d.ts @@ -0,0 +1 @@ +interface Props {} diff --git a/src/types/TableRow.d.ts b/src/types/TableRow.d.ts new file mode 100644 index 00000000..f520605a --- /dev/null +++ b/src/types/TableRow.d.ts @@ -0,0 +1,29 @@ +interface Props { + /** + * Object with Tailwind CSS colors classes + * */ + colors?: { + /** + * Table Row hover bg color + * + * @default 'hover:bg-black/5 dark:hover:bg-white/10' + */ + bgIos?: string; + /** + * Table Row hover bg color + * + * @default 'hover:bg-md-light-secondary-container dark:hover:bg-md-dark-secondary-container' + */ + bgMaterial?: string; + /** + * Table Row divider color + * + * @default 'border-md-light-outline dark:border-md-dark-outline' + */ + dividerMaterial?: string; + }; + /** + * Is located inside the TableHead + */ + header?: boolean; +} diff --git a/src/vue/components/Table.vue b/src/vue/components/Table.vue new file mode 100644 index 00000000..ba34e50f --- /dev/null +++ b/src/vue/components/Table.vue @@ -0,0 +1,41 @@ + + diff --git a/src/vue/components/TableBody.vue b/src/vue/components/TableBody.vue new file mode 100644 index 00000000..fe19be74 --- /dev/null +++ b/src/vue/components/TableBody.vue @@ -0,0 +1,41 @@ + + diff --git a/src/vue/components/TableCell.vue b/src/vue/components/TableCell.vue new file mode 100644 index 00000000..6583afd2 --- /dev/null +++ b/src/vue/components/TableCell.vue @@ -0,0 +1,50 @@ + + diff --git a/src/vue/components/TableHead.vue b/src/vue/components/TableHead.vue new file mode 100644 index 00000000..97244b7a --- /dev/null +++ b/src/vue/components/TableHead.vue @@ -0,0 +1,41 @@ + + diff --git a/src/vue/components/TableRow.vue b/src/vue/components/TableRow.vue new file mode 100644 index 00000000..48c37db4 --- /dev/null +++ b/src/vue/components/TableRow.vue @@ -0,0 +1,48 @@ + + diff --git a/src/vue/konsta-vue.js b/src/vue/konsta-vue.js index 24412f6f..deea107d 100644 --- a/src/vue/konsta-vue.js +++ b/src/vue/konsta-vue.js @@ -50,6 +50,11 @@ import kSheet from './components/Sheet.vue'; import kStepper from './components/Stepper.vue'; import kTabbar from './components/Tabbar.vue'; import kTabbarLink from './components/TabbarLink.vue'; +import kTable from './components/Table.vue'; +import kTableBody from './components/TableBody.vue'; +import kTableCell from './components/TableCell.vue'; +import kTableHead from './components/TableHead.vue'; +import kTableRow from './components/TableRow.vue'; import kToast from './components/Toast.vue'; import kToggle from './components/Toggle.vue'; import kToolbar from './components/Toolbar.vue'; @@ -169,6 +174,16 @@ export { kTabbar as Tabbar, kTabbarLink, kTabbarLink as TabbarLink, + kTable, + kTable as Table, + kTableBody, + kTableBody as TableBody, + kTableCell, + kTableCell as TableCell, + kTableHead, + kTableHead as TableHead, + kTableRow, + kTableRow as TableRow, kToast, kToast as Toast, kToggle,