admin-lte 4.0.0-alpha1 → 4.0.0-alpha2

package/gulpfile.js

@@ -1,315 +0,0 @@
-/* eslint-env node */
-
-const autoprefix = require('autoprefixer')
-const browserSync = require('browser-sync').create()
-const del = require('del')
-const { src, dest, lastRun, watch, series, parallel } = require('gulp')
-const cleanCss = require('gulp-clean-css')
-const gulpESLintNew = require('gulp-eslint-new')
-const fileinclude = require('gulp-file-include')
-const formatHTML = require('gulp-format-html')
-const validator = require('gulp-html')
-const gulpIf = require('gulp-if')
-const postcss = require('gulp-postcss')
-const rename = require('gulp-rename')
-const sass = require('gulp-sass')(require('sass'))
-const gulpStylelint = require('@ronilaukkarinen/gulp-stylelint')
-const terser = require('gulp-terser')
-const rollup = require('rollup')
-const rollupTypescript = require('@rollup/plugin-typescript')
-const rtlcss = require('rtlcss')
-
-const pkg = require('./package')
-const year = new Date().getFullYear()
-const banner = `/*!
- * AdminLTE v${pkg.version} (${pkg.homepage})
- * Copyright 2014-${year} ${pkg.author}
- * Licensed under MIT (https://github.com/ColorlibHQ/AdminLTE/blob/master/LICENSE)
- */`
-
-// Define paths
-
-const paths = {
-  dist: {
-    base: './dist/',
-    css: './dist/css',
-    js: './dist/js',
-    html: './dist/pages',
-    assets: './dist/assets'
-  },
-  src: {
-    base: './src/',
-    html: './src/pages/**/*.html',
-    assets: './src/assets/**/*.*',
-    partials: './src/partials/**/*.html',
-    scss: './src/scss',
-    ts: './src/ts'
-  },
-  temp: {
-    base: './.temp/',
-    css: './.temp/css',
-    js: './.temp/js',
-    html: './.temp/pages',
-    assets: './.temp/assets'
-  }
-}
-
-const sassOptions = {
-  outputStyle: 'expanded',
-  includePaths: ['./node_modules/']
-}
-
-const postcssOptions = [
-  autoprefix({ cascade: false })
-]
-
-const postcssRtlOptions = [
-  autoprefix({ cascade: false }),
-  rtlcss({})
-]
-
-// From here Dev mode will Start
-
-// Lint SCSS
-const lintScss = () => src([paths.src.scss + '/**/*.scss'], { since: lastRun(lintScss) })
-    .pipe(gulpStylelint({
-      failAfterError: false,
-      reporters: [
-        { formatter: 'string', console: true }
-      ],
-      debug: true
-    }))
-
-// Compile SCSS
-const scss = () => src(paths.src.scss + '/adminlte.scss', { sourcemaps: true })
-    .pipe(sass(sassOptions).on('error', sass.logError))
-    .pipe(postcss(postcssOptions))
-    .pipe(dest(paths.temp.css, { sourcemaps: '.' }))
-    .pipe(browserSync.stream())
-
-// Compile SCSS Dark
-// const scssDark = () => src(paths.src.scss + '/dark/adminlte-dark-addon.scss', { sourcemaps: true })
-//     .pipe(sass(sassOptions).on('error', sass.logError))
-//     .pipe(postcss(postcssOptions))
-//     .pipe(dest(paths.temp.css + '/dark', { sourcemaps: '.' }))
-//     .pipe(browserSync.stream())
-
-// Lint TS
-function isFixed(file) {
-  // Has ESLint fixed the file contents?
-  return file.eslint !== null && file.eslint.fixed
-}
-
-const lintTs = () => src([paths.src.ts + '/**/*.ts'], { since: lastRun(lintTs) })
-    .pipe(gulpESLintNew({ fix: true }))
-    .pipe(gulpIf(isFixed, dest(paths.src.ts)))
-    .pipe(gulpESLintNew.format())
-    .pipe(gulpESLintNew.failAfterError())
-
-// Compile TS
-const tsCompile = () =>
-  rollup.rollup({
-    input: paths.src.ts + '/adminlte.ts',
-    output: {
-      banner
-    },
-    plugins: [
-      rollupTypescript()
-    ]
-  }).then(bundle => bundle.write({
-    file: paths.temp.js + '/adminlte.js',
-    format: 'umd',
-    name: 'adminlte',
-    sourcemap: true
-  }))
-
-const assets = () => src([paths.src.assets])
-    .pipe(dest(paths.temp.assets))
-    .pipe(browserSync.stream())
-
-const index = () => src([paths.src.base + '*.html'])
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: './src/partials/',
-      context: {
-        environment: 'development'
-      }
-    }))
-    .pipe(formatHTML())
-    .pipe(dest(paths.temp.base))
-    .pipe(browserSync.stream())
-
-const html = () => src([paths.src.html])
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: './src/partials/',
-      context: {
-        environment: 'development'
-      }
-    }))
-    .pipe(formatHTML())
-    .pipe(dest(paths.temp.html))
-    .pipe(browserSync.stream())
-
-const lintHtml = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'], { since: lastRun(lintHtml) })
-    .pipe(validator())
-
-const serve = () => {
-  browserSync.init({
-    server: paths.temp.base
-  })
-
-  watch([paths.src.scss], series(lintScss))
-  watch([paths.src.scss + '/**/*.scss', '!' + paths.src.scss + '/bootstrap-dark/**/*.scss', '!' + paths.src.scss + '/dark/**/*.scss'], series(scss))
-  watch([paths.src.scss + '/bootstrap-dark/', paths.src.scss + '/dark/'])
-  watch([paths.src.ts], series(lintTs, tsCompile))
-  watch([paths.src.html, paths.src.base + '*.html', paths.src.partials], series(html, index, lintHtml))
-  watch([paths.src.assets], series(assets))
-}
-
-// From here Dist will Start
-
-// Clean
-const cleanDist = () => del([paths.dist.base])
-
-const lintDistScss = () => src([paths.src.scss + '/**/*.scss'], ['./.temp/**/*.css'])
-    .pipe(gulpStylelint({
-      failAfterError: false,
-      reporters: [
-        { formatter: 'string', console: true }
-      ]
-    }))
-
-// Compile and copy all scss/css
-const copyDistCssAll = () => src([paths.src.scss + '/**/*.scss'], {
-  base: paths.src.scss,
-  sourcemaps: true
-})
-    .pipe(sass(sassOptions).on('error', sass.logError))
-    .pipe(postcss(postcssOptions))
-    .pipe(dest(paths.dist.css, { sourcemaps: '.' }))
-
-const copyDistCssRtl = () => src(paths.dist.css + '/*.css', { sourcemaps: true })
-    .pipe(postcss(postcssRtlOptions))
-    .pipe(rename({ suffix: '.rtl' }))
-    .pipe(dest(paths.dist.css + '/rtl', { sourcemaps: '.' }))
-
-// Minify CSS
-const minifyDistCss = () => src([
-  paths.dist.css + '/**/*.css'
-], {
-  base: paths.dist.css,
-  sourcemaps: true
-})
-    .pipe(cleanCss({ format: { breakWith: 'lf' } }))
-    .pipe(rename({ suffix: '.min' }))
-    .pipe(dest(paths.dist.css, { sourcemaps: '.' }))
-
-const lintDistTs = () => src([paths.src.ts + '/**/*.ts'])
-    .pipe(gulpESLintNew())
-    .pipe(gulpESLintNew.failAfterError())
-
-// Compile and copy ts/js
-const copyDistJs = () =>
-  rollup.rollup({
-    input: paths.src.ts + '/adminlte.ts',
-    output: {
-      banner
-    },
-    plugins: [
-      rollupTypescript()
-    ]
-  }).then(bundle => bundle.write({
-    file: paths.dist.js + '/adminlte.js',
-    format: 'umd',
-    name: 'adminlte',
-    sourcemap: true
-  }))
-
-// Minify JS
-const minifyDistJs = () => src(paths.dist.js + '/adminlte.js', { sourcemaps: true })
-    .pipe(terser({ compress: { passes: 2 } }))
-    .pipe(rename({ suffix: '.min' }))
-    .pipe(dest(paths.dist.js, { sourcemaps: '.' }))
-
-// Copy assets
-const copyDistAssets = () => src(paths.src.assets)
-    .pipe(dest(paths.dist.assets))
-
-// Copy index
-const copyDistHtmlIndex = () => src([paths.src.base + '*.html'])
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: './src/partials/',
-      context: {
-        environment: 'production'
-      }
-    }))
-    .pipe(formatHTML())
-    .pipe(dest(paths.dist.base))
-
-// Copy Html
-const copyDistHtml = () => src([paths.src.html])
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: './src/partials/',
-      context: {
-        environment: 'production'
-      }
-    }))
-    .pipe(formatHTML())
-    .pipe(dest(paths.dist.html))
-
-// HTML Lint
-// Copy index for Lint
-const copyDistHtmlIndexForLint = () => src([paths.src.base + '*.html'])
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: './src/partials/',
-      context: {
-        environment: 'production'
-      }
-    }))
-    .pipe(formatHTML())
-    .pipe(dest(paths.temp.base))
-// Copy Html for Lint
-const copyDistHtmlForLint = () => src([paths.src.html])
-    .pipe(fileinclude({
-      prefix: '@@',
-      basepath: './src/partials/',
-      context: {
-        environment: 'production'
-      }
-    }))
-    .pipe(formatHTML())
-    .pipe(dest(paths.temp.html))
-// Now Lint
-const lintDistHtmlCopied = () => src([paths.temp.html + '/**/*.html', paths.temp.base + '*.html'])
-    .pipe(validator())
-
-const lintDistHtml = series(copyDistHtmlIndexForLint, copyDistHtmlForLint, lintDistHtmlCopied)
-
-const lint = parallel(
-  lintDistScss,
-  lintDistTs,
-  lintDistHtml
-)
-exports.lint = lint
-
-const compile = series(
-  cleanDist,
-  parallel(
-    series(copyDistCssAll, copyDistCssRtl, minifyDistCss),
-    series(copyDistJs, minifyDistJs),
-    copyDistAssets,
-    copyDistHtmlIndex,
-    copyDistHtml
-  )
-)
-exports.compile = compile
-
-// For Production Release
-exports.production = series(lint, compile)
-
-// Default - Only for light mode AdminLTE
-exports.default = series(scss, tsCompile, html, index, assets, serve)

package/src/pages/widgets/cards.html

@@ -1,143 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<!-- For RTL verison -->
-<!-- <html lang="en" dir="rtl"> -->
-  <head>
-    @@include('./_head.html', {
-      "path": "../..",
-      "title": "AdminLTE 4 | Widgets - Cards"
-    })
-  </head>
-  <body class="layout-fixed">
-    <div class="wrapper">
-      @@include('./dashboard/_topbar.html', {
-        "path": "../.."
-      })
-
-      @@include('./dashboard/_sidenav.html', {
-        "mainPage": "widgets",
-        "page": "cards",
-        "path": "../.."
-      })
-      <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
-          <div class="container-fluid">
-            <div class="row mb-2">
-              <div class="col-sm-6">
-                <h3>Cards</h3>
-              </div>
-              <div class="col-sm-6">
-                <ol class="breadcrumb float-sm-end">
-                  <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Cards</li>
-                </ol>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Main content -->
-        <div class="content">
-          <div class="container-fluid">
-            <h4 class="mb-2 mt-4">Cards</h4>
-            <h5 class="mb-2">Abilities</h5>
-            <div class="row">
-              <div class="col-md-3">
-                <div class="card card-primary collapsed-card">
-                  <div class="card-header">
-                    <h3 class="card-title">Expandable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-plus"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-              <div class="col-md-3">
-                <div class="card card-success">
-                  <div class="card-header">
-                    <h3 class="card-title">Collapsable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-collapse"><i class="fa-solid fa-minus"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-              <div class="col-md-3">
-                <div class="card card-warning">
-                  <div class="card-header">
-                    <h3 class="card-title">Removable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-dismiss="card-remove"><i class="fa-solid fa-times"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-              <div class="col-md-3">
-                <div class="card card-danger">
-                  <div class="card-header">
-                    <h3 class="card-title">Maximizable</h3>
-
-                    <div class="card-tools">
-                      <button type="button" class="btn btn-tool" data-lte-toggle="card-maximize"><i class="fa-solid fa-expand"></i>
-                      </button>
-                    </div>
-                    <!-- /.card-tools -->
-                  </div>
-                  <!-- /.card-header -->
-                  <div class="card-body">
-                    The body of the card
-                  </div>
-                  <!-- /.card-body -->
-                </div>
-                <!-- /.card -->
-              </div>
-              <!-- /.col -->
-            </div>
-            <!-- /.row -->
-          </div><!-- /.container-fluid -->
-        </div>
-        <!-- /.content -->
-      </main>
-      <!-- /.content-wrapper -->
-
-      @@include('./dashboard/_footer.html', {
-        "path": "../.."
-      })
-    </div>
-    <!--  ./wrapper -->
-
-    @@include('./_scripts.html', {
-      "path": "../.."
-    })
-  </body>
-</html>

package/src/pages/widgets/small-box.html

@@ -1,124 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<!-- For RTL verison -->
-<!-- <html lang="en" dir="rtl"> -->
-  <head>
-    @@include('./_head.html', {
-      "path": "../..",
-      "title": "AdminLTE 4 | Widgets - Small Box"
-    })
-    <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
-  </head>
-  <body class="layout-fixed">
-    <div class="wrapper">
-      @@include('./dashboard/_topbar.html', {
-        "path": "../.."
-      })
-
-      @@include('./dashboard/_sidenav.html', {
-        "mainPage": "widgets",
-        "page": "small-box",
-        "path": "../.."
-      })
-      <!-- Main content -->
-      <main class="content-wrapper">
-        <div class="content-header">
-          <div class="container-fluid">
-            <div class="row mb-2">
-              <div class="col-sm-6">
-                <h3>Small Box</h3>
-              </div>
-              <div class="col-sm-6">
-                <ol class="breadcrumb float-sm-end">
-                  <li class="breadcrumb-item"><a href="#">Home</a></li>
-                  <li class="breadcrumb-item active" aria-current="page">Small Box</li>
-                </ol>
-              </div>
-            </div>
-          </div>
-        </div>
-        <!-- Main content -->
-        <div class="content">
-          <div class="container-fluid">
-            <!-- Small Box (Stat card) -->
-            <h5 class="mb-2">Small Box</h5>
-            <div class="row">
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box text-bg-primary">
-                  <div class="inner">
-                    <h3>150</h3>
-
-                    <p>New Orders</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-bag"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box text-bg-success">
-                  <div class="inner">
-                    <h3>53<sup class="fs-5">%</sup></h3>
-
-                    <p>Bounce Rate</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-stats-bars"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box text-bg-warning">
-                  <div class="inner">
-                    <h3>44</h3>
-
-                    <p>User Registrations</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-person-add"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-              <div class="col-lg-3 col-6">
-                <!-- small box -->
-                <div class="small-box text-bg-danger">
-                  <div class="inner">
-                    <h3>65</h3>
-
-                    <p>Unique Visitors</p>
-                  </div>
-                  <div class="icon">
-                    <i class="inner-icon ion ion-pie-graph"></i>
-                  </div>
-                  <a href="#" class="small-box-footer">More info <i class="fa-solid fa-arrow-circle-right"></i></a>
-                </div>
-              </div>
-              <!-- ./col -->
-            </div>
-            <!-- /.row -->
-          </div><!-- /.container-fluid -->
-        </div>
-        <!-- /.content -->
-      </main>
-      <!-- /.content-wrapper -->
-
-      @@include('./dashboard/_footer.html', {
-        "path": "../.."
-      })
-    </div>
-    <!--  ./wrapper -->
-
-    @@include('./_scripts.html', {
-      "path": "../.."
-    })
-  </body>
-</html>

package/src/partials/_head.html

@@ -1,31 +0,0 @@
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
-<!-- Primary Meta Tags -->
-<title>@@title</title>
-<meta name="viewport" content="width=device-width, initial-scale=1.0">
-<meta name="title" content="@@title">
-<meta name="author" content="ColorlibHQ">
-<meta name="description" content="AdminLTE is a Free Bootstrap 5 Admin Dashboard featuring over 800 components, 10+ plugins and 20 example pages using Vanilla JS.">
-<meta name="keywords" content="bootstrap 5, bootstrap, bootstrap 5 admin dashboard, bootstrap 5 dashboard, bootstrap 5 charts, bootstrap 5 calendar, bootstrap 5 datepicker, bootstrap 5 tables, bootstrap 5 datatable, vanilla js datatable, colorlibhq, colorlibhq dashboard, colorlibhq admin dashboard" />
-<!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is light. -->
-<meta name="color-scheme" content="light dark">
-<!-- By adding @@path/css/dark/adminlte-dark-addon.css then the page supports both dark color schemes, and the page author prefers / default is dark. -->
-<!-- <meta name="color-scheme" content="dark light"> -->
-
-<!-- OPTIONAL LINKS -->
-
-<!-- Google Font: Source Sans Pro -->
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,700&display=fallback">
-
-<!-- overlayScrollbars -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/overlayscrollbars@2.0.3/styles/overlayscrollbars.min.css" integrity="sha256-57dSpDS5wv9AYEEmLxcPfrVnygNCdqDWOXyoR46L9H0=" crossorigin="anonymous">
-
-<!-- Font Awesome -->
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.2.1/css/all.min.css" integrity="sha256-Z1K5uhUaJXA7Ll0XrZ/0JhX4lAtZFpT6jkKrEDT0drU=" crossorigin="anonymous">
-
-<!-- REQUIRED LINKS -->
-
-<!-- Theme style -->
-<link rel="stylesheet" href="@@path/css/adminlte.css">
-
-<!-- For RTL verison use @@path/css/rtl/adminlte.rtl.css, remove dist/css/adminlte.css -->
-<!-- <link rel="stylesheet" href="@@path/css/rtl/adminlte.rtl.css""> -->

package/src/partials/dashboard/_footer.html

@@ -1,9 +0,0 @@
-<!-- Main Footer -->
-<footer class="main-footer">
-  <!-- To the end -->
-  <div class="float-end d-none d-sm-inline">
-    Anything you want
-  </div>
-  <!-- Default to the start -->
-  <strong>Copyright &copy; 2014-2021 <a href="https://adminlte.io">AdminLTE.io</a>.</strong> All rights reserved.
-</footer>