tessl/npm-admin-lte

Comprehensive Bootstrap 4-based administration template framework providing developers with a complete responsive admin interface solution.

—

Pending

Overview

Eval results

Files

Card Components

Name: tessl/npm-admin-lte
Author: tessl

AdminLTE provides two main card components: CardWidget for interactive card controls and CardRefresh for dynamic content loading. These components enable collapsible panels, refreshable content areas, and full-screen card displays.

CardWidget

The CardWidget component provides interactive controls for card elements including collapse/expand, maximize/minimize, and removal functionality.

API

class CardWidget {
  constructor(element: HTMLElement, options?: CardWidgetOptions);
  collapse(): void;
  expand(): void;
  toggle(): void;
  remove(): void;
  maximize(): void;
  minimize(): void;
  toggleMaximize(): void;
}

interface CardWidgetOptions {
  animationSpeed?: string | number;
  collapseTrigger?: string;
  removeTrigger?: string;
  maximizeTrigger?: string;
  collapseIcon?: string;
  expandIcon?: string;
  maximizeIcon?: string;
  minimizeIcon?: string;
}

Default Configuration

const CardWidgetDefaults = {
  animationSpeed: 'normal',
  collapseTrigger: '[data-card-widget="collapse"]',
  removeTrigger: '[data-card-widget="remove"]',
  maximizeTrigger: '[data-card-widget="maximize"]',
  collapseIcon: 'fa-minus',
  expandIcon: 'fa-plus',
  maximizeIcon: 'fa-expand',
  minimizeIcon: 'fa-compress'
};

Events

// Event types triggered by CardWidget
type CardWidgetEvents = 
  | 'expanded.lte.cardwidget'
  | 'collapsed.lte.cardwidget'
  | 'maximized.lte.cardwidget'
  | 'minimized.lte.cardwidget'
  | 'removed.lte.cardwidget';

Usage Examples

Programmatic Usage

import { CardWidget } from 'admin-lte';

// Initialize with custom options
const cardElement = document.querySelector('.card');
const cardWidget = new CardWidget(cardElement, {
  animationSpeed: 'fast',
  collapseIcon: 'fa-chevron-up',
  expandIcon: 'fa-chevron-down'
});

// Control the card programmatically
cardWidget.collapse();
cardWidget.expand();
cardWidget.maximize();
cardWidget.remove();

// Listen for events
cardElement.addEventListener('collapsed.lte.cardwidget', function(event) {
  console.log('Card collapsed');
});

Data Attribute Usage

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Interactive Card</h3>
    <div class="card-tools">
      <!-- Collapse button -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse">
        <i class="fas fa-minus"></i>
      </button>
      <!-- Maximize button -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize">
        <i class="fas fa-expand"></i>
      </button>
      <!-- Remove button -->
      <button type="button" class="btn btn-tool" data-card-widget="remove">
        <i class="fas fa-times"></i>
      </button>
    </div>
  </div>
  <div class="card-body">
    Card content that can be collapsed, maximized, or removed.
  </div>
</div>

jQuery Plugin Usage

// Initialize with jQuery
$('.card').CardWidget({
  animationSpeed: 500,
  collapseIcon: 'fa-angle-up',
  expandIcon: 'fa-angle-down'
});

// Listen for events with jQuery
$('.card').on('collapsed.lte.cardwidget', function() {
  console.log('Card collapsed');
});

CardRefresh

The CardRefresh component enables loading external content into card elements via AJAX requests with loading overlays and error handling.

API

class CardRefresh {
  constructor(element: HTMLElement, options?: CardRefreshOptions);
  load(): void;
}

interface CardRefreshOptions {
  source: string;
  sourceSelector?: string;
  params?: Record<string, any>;
  trigger?: string;
  content?: string;
  loadInContent?: boolean;
  loadOnInit?: boolean;
  loadErrorTemplate?: boolean;
  responseType?: string;
  overlayTemplate?: string;
  errorTemplate?: string;
  onLoadStart?: () => void;
  onLoadDone?: (response: any) => any;
  onLoadFail?: (jqXHR: any, textStatus: string, errorThrown: string) => void;
}

Default Configuration

const CardRefreshDefaults = {
  source: '',
  sourceSelector: '',
  params: {},
  trigger: '[data-card-widget="card-refresh"]',
  content: '.card-body',
  loadInContent: true,
  loadOnInit: true,
  loadErrorTemplate: true,
  responseType: '',
  overlayTemplate: '<div class="overlay"><i class="fas fa-2x fa-sync-alt fa-spin"></i></div>',
  errorTemplate: '<span class="text-danger"></span>',
  onLoadStart: function() {},
  onLoadDone: function(response) { return response; },
  onLoadFail: function(_jqXHR, _textStatus, _errorThrown) {}
};

Events

// Event types triggered by CardRefresh
type CardRefreshEvents = 
  | 'loaded.lte.cardrefresh'
  | 'overlay.added.lte.cardrefresh'
  | 'overlay.removed.lte.cardrefresh';

Usage Examples

Programmatic Usage

import { CardRefresh } from 'admin-lte';

// Initialize card refresh with URL source
const cardElement = document.querySelector('.card');
const cardRefresh = new CardRefresh(cardElement, {
  source: '/api/dashboard-data',
  params: { userId: '123' },
  onLoadStart() {
    console.log('Loading started');
  },
  onLoadDone(response) {
    console.log('Data loaded:', response);
    return response;
  },
  onLoadFail(jqXHR, textStatus, errorThrown) {
    console.error('Load failed:', errorThrown);
  }
});

// Manually trigger refresh
cardRefresh.load();

// Listen for events
cardElement.addEventListener('loaded.lte.cardrefresh', function(event) {
  console.log('Content refreshed');
});

Data Attribute Usage

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Dynamic Content</h3>
    <div class="card-tools">
      <button type="button" 
              class="btn btn-tool" 
              data-card-widget="card-refresh"
              data-source="/api/dashboard-stats"
              data-params='{"period": "today"}'>
        <i class="fas fa-sync-alt"></i>
      </button>
    </div>
  </div>
  <div class="card-body">
    <!-- Content will be loaded here -->
  </div>
</div>

Advanced Configuration

const cardRefresh = new CardRefresh(cardElement, {
  source: '/api/report-data',
  sourceSelector: '.report-content',  // Extract specific part of response
  responseType: 'json',
  loadInContent: false,  // Don't automatically insert content
  overlayTemplate: '<div class="overlay"><div class="spinner-border"></div></div>',
  onLoadDone(response) {
    // Custom processing of response data
    const processedData = processReportData(response);
    this._parent.find('.card-body').html(renderChart(processedData));
    return processedData;
  },
  onLoadFail(jqXHR, textStatus, errorThrown) {
    this._parent.find('.card-body').html(
      '<div class="alert alert-danger">Failed to load data: ' + errorThrown + '</div>'
    );
  }
});

Combined Usage

Cards can use both CardWidget and CardRefresh functionality simultaneously:

<div class="card">
  <div class="card-header">
    <h3 class="card-title">Live Dashboard</h3>
    <div class="card-tools">
      <!-- Refresh button -->
      <button type="button" class="btn btn-tool" 
              data-card-widget="card-refresh"
              data-source="/api/live-stats">
        <i class="fas fa-sync-alt"></i>
      </button>
      <!-- Collapse button -->
      <button type="button" class="btn btn-tool" data-card-widget="collapse">
        <i class="fas fa-minus"></i>
      </button>
      <!-- Maximize button -->
      <button type="button" class="btn btn-tool" data-card-widget="maximize">
        <i class="fas fa-expand"></i>
      </button>
    </div>
  </div>
  <div class="card-body">
    <p>Real-time dashboard content will be loaded here.</p>
  </div>
</div>

Both components will work together, allowing the card to be refreshed, collapsed, and maximized independently.

Install with Tessl CLI