doubleedesign/comet-responsive-panels

There is no license information available for the latest version (dev-main) of this package.

Standalone package for ResponsivePanels from the Comet Components library

dev-main 2025-07-28 01:48 UTC

Requires

• ezyang/htmlpurifier: ^4.18
• illuminate/container: ^10.0
• illuminate/events: ^10.0
• illuminate/filesystem: ^10.0
• illuminate/support: ^10.0
• illuminate/view: ^10.0

Unknown License

• Leesa Ward

README

The standalone version of Responsive Panels from the Comet Components library.

Installation

Install using Composer:

composer require doubleedesign/comet-responsive-panels

Ensure your project loads dependencies using the autoloader:

require_once __DIR__ . '/vendor/autoload.php';

You will need to load the CSS and JS assets for the component into your project, however you usually do so. You will need:

• /vendor/doubleedesign/comet-responsive-panels/dist/src/components/global.css
• /vendor/doubleedesign/comet-responsive-panels/dist/src/components/responsive-panels.css
• /vendor/doubleedesign/comet-responsive-panels/dist/src/components/responsive-panels.js

The JS file also needs to be specified as a module, and a base path given for the Vue loader to pick up. For example:

<script type="module" data-base-path="/vendor/doubleedesign/comet-responsive-panels/dist" src="/vendor/doubleedesign/comet-responsive-panels/dist/src/components/responsive-panels.js"></script>

An example of how you might set up the client-side assets in a WordPress plugin is:

<?php
namespace YourNamespace\PluginName;

class Frontend {
	public function __construct() {
		add_action('wp_enqueue_scripts', [$this, 'load_frontend_assets']);
		add_filter('script_loader_tag', [$this, 'script_type_module'], 10, 3);
	}
	
	public function load_frontend_assets(): void {
		$rootDir = '/wp-content/plugins/simple-document-portal/vendor/doubleedesign/comet-responsive-panels/dist/src';
		$antiCacheVer = filemtime(WP_CONTENT_DIR . '/plugins/simple-document-portal/vendor/doubleedesign/comet-responsive-panels/dist/src/components/ResponsivePanels/responsive-panels.js');
	
		wp_enqueue_style('comet-global', $rootDir . '/src/components/global.css', [], '0.0.2');
		wp_enqueue_style('comet-responsive-panels', $rootDir . '/components/ResponsivePanels/responsive-panels.css', [], $antiCacheVer);
		wp_enqueue_script('comet-responsive-panels', $rootDir . '/components/ResponsivePanels/responsive-panels.js', [], $antiCacheVer, true);
	}
	
	public function script_type_module($tag, $handle, $src): mixed {
		if(str_starts_with($handle, 'comet-')) {
			$rootDir = '/wp-content/plugins/simple-document-portal/vendor/doubleedesign/comet-responsive-panels/dist';
			$src = esc_url($src);
			$tag = "<script type=\"module\" data-base-path=\"$rootDir\" src=\"" . $src . "\" id=\"$handle\"></script>";
		}	
	
		return $tag;
	}
}

An example implementation can be seen in the Simple Document Portal plugin.