Laravel 11, Vuexy Admin 10.3, by admin@koneko.mx
This commit is contained in:
30
modules/Admin/Resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js
vendored
Normal file
30
modules/Admin/Resources/assets/vendor/libs/datatables-bs5/datatables-bootstrap5.js
vendored
Normal file
@ -0,0 +1,30 @@
|
||||
import JSZip from 'jszip';
|
||||
import pdfMake from 'pdfmake';
|
||||
import 'pdfmake/build/vfs_fonts';
|
||||
import 'datatables.net-bs5';
|
||||
import 'datatables.net-fixedcolumns-bs5';
|
||||
import 'datatables.net-fixedheader-bs5';
|
||||
import 'datatables.net-select-bs5';
|
||||
import 'datatables.net-buttons';
|
||||
import 'datatables.net-buttons-bs5';
|
||||
import 'datatables.net-buttons/js/buttons.html5';
|
||||
import 'datatables.net-buttons/js/buttons.print';
|
||||
import 'datatables.net-responsive';
|
||||
import 'datatables.net-responsive-bs5';
|
||||
import 'datatables.net-rowgroup-bs5';
|
||||
import Checkbox from 'jquery-datatables-checkboxes';
|
||||
import { datatable_spanish_default } from '../datatables-lang/datatable-lang-es';
|
||||
|
||||
// This solution related to font issues with pdfMake
|
||||
pdfMake.fonts = {
|
||||
Roboto: {
|
||||
normal: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Regular.ttf',
|
||||
bold: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Medium.ttf',
|
||||
italics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-Italic.ttf',
|
||||
bolditalics: 'https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.66/fonts/Roboto/Roboto-MediumItalic.ttf'
|
||||
}
|
||||
};
|
||||
$.fn.dataTable.ext.Checkbox = Checkbox(window, $);
|
||||
$.fn.dataTable.ext.buttons.pdfMake = pdfMake;
|
||||
$.fn.dataTable.ext.datatable_spanish_default = datatable_spanish_default;
|
||||
window.JSZip = JSZip;
|
||||
394
modules/Admin/Resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss
vendored
Normal file
394
modules/Admin/Resources/assets/vendor/libs/datatables-bs5/datatables.bootstrap5.scss
vendored
Normal file
@ -0,0 +1,394 @@
|
||||
@use '../../scss/_bootstrap-extended/include' as light;
|
||||
@use '../../scss/_bootstrap-extended/include-dark' as dark;
|
||||
@import '../../scss/_custom-variables/libs';
|
||||
@import 'datatables.net-bs5/css/dataTables.bootstrap5';
|
||||
|
||||
// Margin between select, input field and text
|
||||
div.dataTables_wrapper div.dataTables_length select {
|
||||
margin-left: 0.5rem;
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_filter input {
|
||||
margin-left: 1em;
|
||||
}
|
||||
|
||||
.dataTable .emp_name {
|
||||
font-weight: light.$font-weight-medium;
|
||||
}
|
||||
|
||||
// Shadow none for action buttons
|
||||
.dataTable td .btn {
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
// Card header inside the datatable
|
||||
div.dataTables_wrapper .card-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-top: light.$spacer * 0.5;
|
||||
}
|
||||
|
||||
table.table-bordered.dataTable {
|
||||
// For complex header and column search datatable
|
||||
&.dt-complex-header,
|
||||
&.dt-column-search {
|
||||
thead tr th {
|
||||
border-width: 1px;
|
||||
}
|
||||
tfoot tr th {
|
||||
border-width: 1px;
|
||||
}
|
||||
}
|
||||
& tfoot tr th {
|
||||
border-bottom-width: 1px;
|
||||
}
|
||||
& > :not(caption) > * {
|
||||
& > * {
|
||||
border-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Remove left and right border from datatable with table-bordered class
|
||||
table.table-bordered.dataTable {
|
||||
tr:first-child th,
|
||||
td {
|
||||
&:first-child {
|
||||
@include app-ltr() {
|
||||
border-left-width: 0;
|
||||
}
|
||||
@include app-rtl() {
|
||||
border-right-width: 0;
|
||||
}
|
||||
}
|
||||
&:last-child {
|
||||
@include app-ltr() {
|
||||
border-right-width: 0;
|
||||
}
|
||||
@include app-rtl() {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
> tbody:not(caption) tr:first-child {
|
||||
border-top-width: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive datatable in desktop screen
|
||||
@media screen and (min-width: 1399.98px) {
|
||||
table.table-responsive {
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
// RTL style
|
||||
@include app-rtl(false) {
|
||||
div.dataTables_wrapper .dataTables_filter {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
input {
|
||||
margin-left: 0;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
table.table-bordered.dataTable th,
|
||||
table.table-bordered.dataTable td {
|
||||
border-right-width: 0;
|
||||
border-left-width: 1px;
|
||||
|
||||
&:last-child {
|
||||
border-left-width: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
width: 100% !important;
|
||||
border-collapse: collapse !important;
|
||||
margin-bottom: light.$spacer !important;
|
||||
margin-top: 0 !important;
|
||||
thead th {
|
||||
&.sorting_disabled {
|
||||
&::before,
|
||||
&::after {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
&.sorting {
|
||||
&:before,
|
||||
&:after {
|
||||
visibility: hidden;
|
||||
}
|
||||
&:hover {
|
||||
&:before,
|
||||
&:after {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@include app-rtl {
|
||||
&.table-sm > thead > tr > th {
|
||||
padding-left: 1.25rem;
|
||||
}
|
||||
|
||||
&.table-sm .sorting:before,
|
||||
&.table-sm .sorting_asc:before,
|
||||
&.table-sm .sorting_desc:before {
|
||||
right: auto !important;
|
||||
left: 0.85em !important;
|
||||
}
|
||||
thead th,
|
||||
thead td,
|
||||
tfoot th,
|
||||
tfoot td {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
// Checkbox height & width for datatables checkboxes
|
||||
.form-check-input {
|
||||
width: light.$form-datatables-check-input-size;
|
||||
height: light.$form-datatables-check-input-size;
|
||||
}
|
||||
}
|
||||
|
||||
// to add spacing between table and datatable footer elements like pagination & info
|
||||
.dataTables_scroll {
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
// Used while complex headers
|
||||
table.dataTable thead th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
table.dataTable thead .sorting,
|
||||
table.dataTable thead .sorting_asc,
|
||||
table.dataTable thead .sorting_desc,
|
||||
table.dataTable thead .sorting_asc_disabled,
|
||||
table.dataTable thead .sorting_desc_disabled {
|
||||
&::before,
|
||||
&::after {
|
||||
line-height: 1.25rem !important;
|
||||
font-family: tabler-icons !important;
|
||||
font-size: 1rem !important;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
right: 0.78rem !important;
|
||||
}
|
||||
&::before {
|
||||
content: '\ea62' !important;
|
||||
top: 0.58rem !important;
|
||||
}
|
||||
&::after {
|
||||
bottom: 0.72rem !important;
|
||||
content: '\ea5f' !important;
|
||||
}
|
||||
@include app-rtl {
|
||||
&::before {
|
||||
right: auto !important;
|
||||
left: 0.58em !important;
|
||||
}
|
||||
|
||||
&::after {
|
||||
right: auto !important;
|
||||
left: 0.58em !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// DataTable within card
|
||||
div.card-datatable.dataTable,
|
||||
div.card-datatable .dataTable {
|
||||
border-right: 0;
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// Card header inside the datatable
|
||||
@media screen and (max-width: 575.98px) {
|
||||
div.dataTables_wrapper .card-header {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.dtr-bs-modal.modal {
|
||||
// padding-left: 0.75rem;
|
||||
.modal-body {
|
||||
padding: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
}
|
||||
.dataTable_select div.dataTables_wrapper div.dataTables_info {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767.98px) {
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
padding-bottom: light.$table-cell-padding-y;
|
||||
}
|
||||
}
|
||||
|
||||
div.dataTables_wrapper {
|
||||
div.dataTables_length,
|
||||
.dataTables_filter {
|
||||
margin-top: light.$spacer * 1.5;
|
||||
margin-bottom: light.$spacer * 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
// common style for light / dark
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
.page-item {
|
||||
&,
|
||||
&.next,
|
||||
&.previous,
|
||||
&.first,
|
||||
&.last {
|
||||
.page-link {
|
||||
border-radius: light.$border-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination .page-link {
|
||||
div:not(.table-responsive) div.dataTables_wrapper .dataTables_paginate {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@include light.media-breakpoint-down(md) {
|
||||
div.dataTables_wrapper div.dataTables_length label,
|
||||
div.dataTables_wrapper div.dataTables_filter label,
|
||||
div.dataTables_wrapper div.dataTables_info,
|
||||
div.dataTables_wrapper div.dataTables_paginate {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
@include light.media-breakpoint-down(sm) {
|
||||
div.dataTables_wrapper div.dataTables_paginate ul.pagination {
|
||||
justify-content: start !important;
|
||||
overflow-x: scroll;
|
||||
}
|
||||
}
|
||||
|
||||
// DataTable within card
|
||||
div.card-datatable {
|
||||
padding-bottom: light.$card-spacer-x-sm; // Check this in site and update if needed
|
||||
|
||||
[class*='col-md-'] {
|
||||
padding-right: light.$table-cell-padding-x !important;
|
||||
padding-left: light.$table-cell-padding-x !important;
|
||||
}
|
||||
// length, filter & info, pagination row margin
|
||||
&:not(.table-responsive) .dataTables_wrapper .row {
|
||||
&:first-child,
|
||||
&:last-child {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// LTR style
|
||||
@include app-ltr(false) {
|
||||
div.card-datatable table.dataTable thead th,
|
||||
div.card-datatable table.dataTable tfoot th {
|
||||
&:first-child {
|
||||
padding-left: light.$card-spacer-x;
|
||||
padding-right: light.$card-spacer-x;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-right: light.$card-spacer-x-sm;
|
||||
}
|
||||
}
|
||||
div.card-datatable table.dataTable tbody td {
|
||||
&:first-child {
|
||||
padding-left: light.$card-spacer-x;
|
||||
padding-right: light.$card-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// RTL Style
|
||||
@include app-rtl(false) {
|
||||
table.dataTable.table-sm > thead > tr > th {
|
||||
padding-right: light.$table-cell-padding-x-sm;
|
||||
}
|
||||
table.table-bordered.dataTable tr {
|
||||
td,
|
||||
th,
|
||||
th:first-child {
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
table.dataTable {
|
||||
thead th,
|
||||
tbody td,
|
||||
tfoot th {
|
||||
padding-right: light.$table-cell-padding-x;
|
||||
}
|
||||
|
||||
&.table-sm thead th,
|
||||
&.table-sm tbody td,
|
||||
&.table-sm tfoot th {
|
||||
padding-right: light.$table-cell-padding-x-sm;
|
||||
}
|
||||
}
|
||||
|
||||
div.card-datatable table.dataTable {
|
||||
thead th,
|
||||
tbody td,
|
||||
tfoot th {
|
||||
&:first-child {
|
||||
padding-right: light.$card-spacer-x;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
padding-left: light.$card-spacer-x;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light style
|
||||
@if $enable-light-style {
|
||||
.light-style {
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
color: light.$text-muted;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top-color: light.$table-border-color;
|
||||
}
|
||||
|
||||
table.dataTable th,
|
||||
table.dataTable td {
|
||||
border-color: light.$table-border-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Dark Style
|
||||
@if $enable-dark-style {
|
||||
.dark-style {
|
||||
div.dataTables_wrapper div.dataTables_info {
|
||||
color: dark.$text-muted;
|
||||
}
|
||||
|
||||
div.dataTables_scrollBody table {
|
||||
border-top-color: dark.$table-border-color;
|
||||
}
|
||||
|
||||
table.dataTable th,
|
||||
table.dataTable td {
|
||||
border-color: dark.$table-border-color !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user