diff --git a/resources/metronic/core/plugins/components/table.js b/resources/metronic/core/plugins/components/table.js index 02c9cad..beb9a6f 100644 --- a/resources/metronic/core/plugins/components/table.js +++ b/resources/metronic/core/plugins/components/table.js @@ -1,230 +1,269 @@ /* eslint-disable max-len */ -import plugin from 'tailwindcss/plugin'; -import svgToDataUri from 'mini-svg-data-uri'; +import plugin from "tailwindcss/plugin"; +import svgToDataUri from "mini-svg-data-uri"; -export default plugin(({addComponents, theme}) => { - // Base - addComponents({ - '.table': { - 'width': '100%', - 'caption-side': 'bottom', - 'border-collapse': 'collapse', - 'vertical-align': 'middle', - 'text-align': 'left', - 'color': 'var(--tw-gray-700)', - 'font-weight': theme('fontWeight.medium'), - 'font-size': theme('fontSize.sm'), - 'line-height': theme('fontSize.sm.1.lineHeight'), - 'th, td': { - 'input[type="checkbox"]': { - 'vertical-align': 'inherit' - } - }, - 'thead, tfoot': { - 'td, th': { - 'background-color': 'var(--tw-table-head-background-color)', - 'color': 'var(--tw-gray-600)', - 'font-weight': theme('fontWeight.medium'), - 'font-size': theme('fontSize.2sm'), - 'line-height': theme('fontSize.2sm.1.lineHeight'), - 'vertical-align': 'middle' - }, - }, - 'thead': { - 'td, th': { - 'border-bottom': 'var(--tw-table-border)' - }, - }, - 'tfoot': { - 'td, th': { - 'border-top': 'var(--tw-table-border)' - }, - }, - 'tbody': { - 'vertical-align': 'inherit', - 'tr': { - 'td, th': { - 'border-bottom': 'var(--tw-table-border)' - }, - '&:last-child': { - 'td, th': { - 'border-bottom': '0', - }, - }, - } - } - } - }); +export default plugin(({ addComponents, theme }) => { + // Base + addComponents({ + ".table": { + width: "100%", + "caption-side": "bottom", + "border-collapse": "collapse", + "vertical-align": "middle", + "text-align": "left", + color: "var(--tw-gray-700)", + "font-weight": theme("fontWeight.medium"), + "font-size": theme("fontSize.sm"), + "line-height": theme("fontSize.sm.1.lineHeight"), + "th, td": { + 'input[type="checkbox"]': { + "vertical-align": "inherit", + }, + }, + "thead, tfoot": { + "td, th": { + "background-color": "var(--tw-gray-100)", + color: "var(--tw-gray-800)", + "font-weight": theme("fontWeight.bolder"), + "font-size": theme("fontSize.2sm"), + "line-height": theme("fontSize.2sm.1.lineHeight"), + "vertical-align": "middle", + }, + }, + thead: { + "td, th": { + "border-bottom": "var(--tw-table-border)", + }, + }, + tfoot: { + "td, th": { + "border-top": "var(--tw-table-border)", + }, + }, + tbody: { + "vertical-align": "inherit", + tr: { + "td, th": { + "border-bottom": "var(--tw-table-border)", + }, + "&:last-child": { + "td, th": { + "border-bottom": "0", + }, + }, + }, + }, + }, + }); - // Sizes - addComponents({ - '.table': { - 'thead, tfoot': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.DEFAULT'), - 'padding-right': theme('custom.components.table.px.DEFAULT'), - 'padding-top': theme('custom.components.table.py.DEFAULT.head'), - 'padding-bottom': theme('custom.components.table.py.DEFAULT.head') - }, - }, - 'tbody': { - 'tr': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.DEFAULT'), - 'padding-right': theme('custom.components.table.px.DEFAULT'), - 'padding-top': theme('custom.components.table.py.DEFAULT.body'), - 'padding-bottom': theme('custom.components.table.py.DEFAULT.body') - } - } - } - }, - '.table-xs': { - 'thead, tfoot': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.xs'), - 'padding-right': theme('custom.components.table.px.xs'), - 'padding-top': theme('custom.components.table.py.xs.head'), - 'padding-bottom': theme('custom.components.table.py.xs.head') - }, - }, - 'tbody': { - 'tr': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.xs'), - 'padding-right': theme('custom.components.table.px.xs'), - 'padding-top': theme('custom.components.table.py.xs.body'), - 'padding-bottom': theme('custom.components.table.py.xs.body') - } - } - } - }, - '.table-sm': { - 'thead, tfoot': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.sm'), - 'padding-right': theme('custom.components.table.px.sm'), - 'padding-top': theme('custom.components.table.py.sm.head'), - 'padding-bottom': theme('custom.components.table.py.sm.head') - }, - }, - 'tbody': { - 'tr': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.sm'), - 'padding-right': theme('custom.components.table.px.sm'), - 'padding-top': theme('custom.components.table.py.sm.body'), - 'padding-bottom': theme('custom.components.table.py.sm.body') - } - } - } - }, - '.table-lg': { - 'thead, tfoot': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.lg'), - 'padding-right': theme('custom.components.table.px.lg'), - 'padding-top': theme('custom.components.table.py.lg.head'), - 'padding-bottom': theme('custom.components.table.py.lg.head') - }, - }, - 'tbody': { - 'tr': { - 'td, th': { - 'padding-left': theme('custom.components.table.px.lg'), - 'padding-right': theme('custom.components.table.px.lg'), - 'padding-top': theme('custom.components.table.py.lg.body'), - 'padding-bottom': theme('custom.components.table.py.lg.body') - } - } - } - } - }); - - // Border - addComponents({ - '.table-border': { - 'border': 'var(--tw-table-border)', - 'td, th': { - 'border-right': 'var(--tw-table-border)', - '&:last-child': { - 'border-right': '0' - } - } - }, - '.table-border-l': { - 'border-left': 'var(--tw-table-border)' - }, - '.table-border-r': { - 'border-right': 'var(--tw-table-border)' - }, - '.table-border-t': { - 'border-top': 'var(--tw-table-border)' - }, - '.table-border-b': { - 'border-bottom': 'var(--tw-table-border)' - } - }); + // Sizes + addComponents({ + ".table": { + "thead, tfoot": { + "td, th": { + "padding-left": theme("custom.components.table.px.DEFAULT"), + "padding-right": theme( + "custom.components.table.px.DEFAULT", + ), + "padding-top": theme( + "custom.components.table.py.DEFAULT.head", + ), + "padding-bottom": theme( + "custom.components.table.py.DEFAULT.head", + ), + }, + }, + tbody: { + tr: { + "td, th": { + "padding-left": theme( + "custom.components.table.px.DEFAULT", + ), + "padding-right": theme( + "custom.components.table.px.DEFAULT", + ), + "padding-top": theme( + "custom.components.table.py.DEFAULT.body", + ), + "padding-bottom": theme( + "custom.components.table.py.DEFAULT.body", + ), + }, + }, + }, + }, + ".table-xs": { + "thead, tfoot": { + "td, th": { + "padding-left": theme("custom.components.table.px.xs"), + "padding-right": theme("custom.components.table.px.xs"), + "padding-top": theme("custom.components.table.py.xs.head"), + "padding-bottom": theme( + "custom.components.table.py.xs.head", + ), + }, + }, + tbody: { + tr: { + "td, th": { + "padding-left": theme("custom.components.table.px.xs"), + "padding-right": theme("custom.components.table.px.xs"), + "padding-top": theme( + "custom.components.table.py.xs.body", + ), + "padding-bottom": theme( + "custom.components.table.py.xs.body", + ), + }, + }, + }, + }, + ".table-sm": { + "thead, tfoot": { + "td, th": { + "padding-left": theme("custom.components.table.px.sm"), + "padding-right": theme("custom.components.table.px.sm"), + "padding-top": theme("custom.components.table.py.sm.head"), + "padding-bottom": theme( + "custom.components.table.py.sm.head", + ), + }, + }, + tbody: { + tr: { + "td, th": { + "padding-left": theme("custom.components.table.px.sm"), + "padding-right": theme("custom.components.table.px.sm"), + "padding-top": theme( + "custom.components.table.py.sm.body", + ), + "padding-bottom": theme( + "custom.components.table.py.sm.body", + ), + }, + }, + }, + }, + ".table-lg": { + "thead, tfoot": { + "td, th": { + "padding-left": theme("custom.components.table.px.lg"), + "padding-right": theme("custom.components.table.px.lg"), + "padding-top": theme("custom.components.table.py.lg.head"), + "padding-bottom": theme( + "custom.components.table.py.lg.head", + ), + }, + }, + tbody: { + tr: { + "td, th": { + "padding-left": theme("custom.components.table.px.lg"), + "padding-right": theme("custom.components.table.px.lg"), + "padding-top": theme( + "custom.components.table.py.lg.body", + ), + "padding-bottom": theme( + "custom.components.table.py.lg.body", + ), + }, + }, + }, + }, + }); - // Sort - addComponents({ - '.sort': { - 'display': 'inline-flex', - 'align-items': 'center', - 'gap': '0.35rem', - 'cursor': 'pointer', - 'line-height': '1' - }, - '.sort-icon': { - 'display': 'inline-flex', - 'flex-direction': 'column', - 'justify-content': 'center', - 'align-items': 'center', - 'height': '0.875rem', - 'width': '0.875rem', - 'gap': '0.125rem', - 'line-height': '1', - '&:before': { - 'display': 'inline-block', - 'content': '""', - 'height': '0.25rem', - 'width': '0.438rem', - 'background-repeat': 'no-repeat', - 'background-position': `center`, - 'background-size': 'cover', - 'background-image': `url("${svgToDataUri(``)}")` - }, - '&:after': { - 'display': 'inline-block', - 'content': '""', - 'height': '0.25rem', - 'width': '0.438rem', - 'background-repeat': 'no-repeat', - 'background-position': `center`, - 'background-size': 'cover', - 'background-image': `url("${svgToDataUri(``)}")` - }, - '.asc > &': { - '&:before': { - 'background-image': `url("${svgToDataUri(``)}")` - }, - '&:after': { - 'background-image': `url("${svgToDataUri(``)}")` - } - }, - '.desc > &': { - '&:before': { - 'background-image': `url("${svgToDataUri(``)}")` - }, - '&:after': { - 'background-image': `url("${svgToDataUri(``)}")` - } - } - }, - '.sort-label': { - 'display': 'inline-flex', - 'align-items': 'center', - 'gap': '0.35rem' - } - }); - -}); \ No newline at end of file + // Border + addComponents({ + ".table-border": { + border: "var(--tw-table-border)", + "td, th": { + "border-right": "var(--tw-table-border)", + "&:last-child": { + "border-right": "0", + }, + }, + tbody: { + tr: { + "&:nth-of-type(even)": { + "background-color": + "var(--tw-table-striped-background-color, var(--tw-table-head-background-color))", + }, + }, + }, + }, + ".table-border-l": { + "border-left": "var(--tw-table-border)", + }, + ".table-border-r": { + "border-right": "var(--tw-table-border)", + }, + ".table-border-t": { + "border-top": "var(--tw-table-border)", + }, + ".table-border-b": { + "border-bottom": "var(--tw-table-border)", + }, + }); + + // Sort + addComponents({ + ".sort": { + display: "inline-flex", + "align-items": "center", + gap: "0.35rem", + cursor: "pointer", + "line-height": "1", + }, + ".sort-icon": { + display: "inline-flex", + "flex-direction": "column", + "justify-content": "center", + "align-items": "center", + height: "0.875rem", + width: "0.875rem", + gap: "0.125rem", + "line-height": "1", + "&:before": { + display: "inline-block", + content: '""', + height: "0.25rem", + width: "0.438rem", + "background-repeat": "no-repeat", + "background-position": `center`, + "background-size": "cover", + "background-image": `url("${svgToDataUri(``)}")`, + }, + "&:after": { + display: "inline-block", + content: '""', + height: "0.25rem", + width: "0.438rem", + "background-repeat": "no-repeat", + "background-position": `center`, + "background-size": "cover", + "background-image": `url("${svgToDataUri(``)}")`, + }, + ".asc > &": { + "&:before": { + "background-image": `url("${svgToDataUri(``)}")`, + }, + "&:after": { + "background-image": `url("${svgToDataUri(``)}")`, + }, + }, + ".desc > &": { + "&:before": { + "background-image": `url("${svgToDataUri(``)}")`, + }, + "&:after": { + "background-image": `url("${svgToDataUri(``)}")`, + }, + }, + }, + ".sort-label": { + display: "inline-flex", + "align-items": "center", + gap: "0.35rem", + }, + }); +}); diff --git a/resources/views/layouts/sidebar.blade.php b/resources/views/layouts/sidebar.blade.php index 69797fe..22efed2 100644 --- a/resources/views/layouts/sidebar.blade.php +++ b/resources/views/layouts/sidebar.blade.php @@ -1,5 +1,5 @@