feat: initial commit - Band Management application

resources/vuexy-admin-v10.11.1/django-version/starter-kit/src/libs/datatables-bs5/datatables-bootstrap5.js

@@ -0,0 +1,27 @@
+// Core libraries
+import JSZip from 'jszip';
+import pdfMake from 'pdfmake/build/pdfmake';
+import pdfFonts from 'pdfmake/build/vfs_fonts';
+
+// DataTables libraries (with related plugins)
+import DataTable from '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';
+
+// Attach libraries to the window object (if needed globally)
+try {
+  window.pdfMake = pdfMake;
+  window.pdfFonts = pdfFonts;
+  window.JSZip = JSZip;
+} catch (e) {}
+
+// Export the libraries/modules
+export { DataTable, JSZip, pdfMake, pdfFonts };

resources/vuexy-admin-v10.11.1/django-version/starter-kit/src/libs/datatables-bs5/datatables.bootstrap5.scss

@@ -0,0 +1,295 @@
+@import "../../scss/_bootstrap-extended/include";
+@import "datatables.net-bs5/css/dataTables.bootstrap5";
+
+/* FIX: broken ui in tablet devices */
+@media (hover: none) and (pointer: coarse) {
+  table.dataTable {
+    display: table;
+    overflow-x: auto;
+  }
+}
+
+/* Card header inside the datatable */
+div.dt-container {
+  .card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+  }
+
+  .dt-buttons {
+    inline-size: auto;
+    .dt-button-down-arrow {
+      display: none;
+    }
+    @include media-breakpoint-down(md) {
+      &.btn-group {
+        display: block;
+      }
+    }
+  }
+
+  /* Remove left and right border from datatable with table-bordered class */
+  .table.table-bordered.dataTable {
+    &.dt-complex-header,
+    &.dt-column-search {
+      thead tr th {
+        border-width: $border-width;
+        &:first-child {
+          border-inline-start-width: 0;
+        }
+        &:last-child {
+          border-inline-end-width: 0;
+        }
+      }
+    }
+    th,
+    td {
+      &:last-child {
+        border-width: 0;
+      }
+    }
+  }
+
+
+  /* Responsive datatable in desktop screen */
+  @media screen and (width >= 1399.98px) {
+    table.table-responsive {
+      display: table;
+    }
+  }
+  div.dt-search {
+    input {
+      margin-inline: .5rem 0;
+    }
+    .form-control::-webkit-search-cancel-button {
+      margin-inline-start: .375rem;
+    }
+  }
+
+  div.dt-layout-end > *:not(:first-child) {
+    margin-inline: 0;
+  }
+
+  table.dataTable {
+    border-collapse: collapse;
+    inline-size: 100%;
+    margin-block: 0 $spacer;
+
+    /* Checkbox height & width for datatables checkboxes */
+    .form-check-input {
+      block-size: $form-datatables-check-input-size;
+      inline-size: $form-datatables-check-input-size;
+    }
+
+    thead {
+      > tr {
+        > th,
+        > td {
+          &.dt-orderable-asc,
+          &.dt-orderable-desc {
+            &:hover {
+              outline: none !important;
+            }
+          }
+        }
+      }
+      th {
+        /* Used while complex headers */
+        vertical-align: middle;
+      }
+    }
+    .dt-control.dt-orderable-none .dt-column-order::before {
+      opacity: 0;
+    }
+    td.dt-control::before {
+      border: 2px solid;
+      block-size: .55em;
+      border-block-start: 0;
+      border-inline-start: 0;
+      inline-size: .55em;
+      transform: rotate(-45deg);
+      :dir(rtl) & {
+        transform: rotate(-315deg);
+      }
+    }
+    tr.dt-hasChild td.dt-control::before {
+      border-block-start: 0;
+      border-inline-start: 0;
+      transform: rotate(45deg);
+      :dir(rtl) & {
+        transform: rotate(-45deg);
+      }
+    }
+    &.table tbody > tr {
+      &.selected,
+      & > .selected {
+        background-color: rgba(var(--#{$prefix}primary-rgb), .08);
+        > * {
+          box-shadow: none;
+          color: var(--#{$prefix}body-color);
+        }
+        a {
+          color: var(--#{$prefix}body-color);
+        }
+      }
+    }
+  }
+
+  div.dt-scroll-body {
+    border-block-end-width: 0;
+  }
+
+  @media screen and (width <= 575.98px) {
+    .card-header {
+      .dt-action-buttons {
+        padding-block-start: 1rem;
+      }
+    }
+    .dtr-bs-modal.modal {
+      .modal-body {
+        padding: 0;
+        .table {
+          margin-block-end: 0;
+        }
+      }
+    }
+  }
+
+  @media screen and (width <= 767.98px) {
+    div.dt-info {
+      padding-block: 0 $table-cell-padding-y;
+    }
+  }
+
+  div.dt-length,
+  div.dt-search {
+    margin-block: $spacer * 1.5;
+  }
+
+  div.dt-length select {
+    margin-inline: .5rem;
+  }
+
+  /* common style for light / dark */
+  div.dt-paging ul.pagination .page-link {
+    padding: $pagination-padding-y;
+    font-size: $font-size-base;
+    line-height: $pagination-line-height;
+    @include border-radius($border-radius);
+  }
+
+  @media screen and (width <= 575.98px) {
+    div.dt-paging ul.pagination .page-link {
+      font-size: $font-size-sm;
+      min-block-size:
+        calc(
+          #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-y-sm * 2)} + calc(#{$pagination-border-width} * 2)"}
+        );
+      min-inline-size:
+        calc(
+          #{"#{($font-size-sm * $pagination-line-height) + ($pagination-padding-x-sm * 2.356)} + calc(#{$pagination-border-width} * 2)"}
+        );
+      padding-block: $pagination-padding-y-sm - .1055rem;
+      padding-inline: $pagination-padding-x-sm - .1055rem;
+    }
+    div.dt-paging ul.pagination {
+      .page-item {
+        .next,
+        .previous,
+        .first,
+        .last {
+          &.page-link {
+            padding: calc($pagination-padding-y-sm - .1055rem);
+          }
+        }
+      }
+    }
+  }
+  div.dt-info .select-info .select-item {
+    margin-inline: .5rem;
+  }
+}
+
+/* DataTable within card */
+div.card-datatable {
+  padding-block-end: $card-spacer-x-sm;
+  div.dt-info {
+    color: var(--#{$prefix}secondary-color);
+  }
+}
+
+.table-bordered > :not(caption) > * > * {
+  border-width: 0;
+}
+
+/* overrides styles of library for rtl */
+table.dataTable {
+  &,
+  thead,
+  tfoot {
+    th,
+    td {
+      &,
+      &.dt-type-numeric,
+      &.dt-type-date {
+        text-align: start;
+      }
+      &:first-child{
+        padding-inline: $card-spacer-x;
+      }
+    }
+    th:last-child{
+      padding-inline-end: $card-spacer-x-sm;
+    }
+  }
+  thead {
+    .dt-orderable-asc.dt-orderable-desc,
+    .dt-ordering-desc,
+    .dt-ordering-asc {
+      .dt-column-order {
+        inset-inline: auto 1em;
+        &::before,
+        &::after {
+          background-color: var(--#{$prefix}heading-color);
+          block-size: 1.125rem;
+          content: "";
+          inline-size: 1.125rem;
+          mask-repeat: no-repeat;
+          mask-size: 100% 100%;
+          visibility: hidden;
+        }
+
+        &::before {
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='m6.293 13.293l1.414 1.414L12 10.414l4.293 4.293l1.414-1.414L12 7.586z'/%3E%3C/svg%3E");
+        }
+        &::after {
+          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='currentColor' d='M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z'/%3E%3C/svg%3E");
+        }
+      }
+      &:hover {
+        .dt-column-order {
+          &::before,
+          &::after {
+            visibility: visible;
+          }
+        }
+      }
+    }
+  }
+}
+
+/* text align styles in modal */
+.modal.dtr-bs-modal .text-xxl-center {
+  text-align: start !important;
+}
+
+/* Dark theme */
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    div.dt-container table.dataTable tr.dt-hasChild td.dt-control::before {
+      border-color: rgba(var(--#{$prefix}white-rgb), .5);
+    }
+  }
+}