frutjam 0.0.3 → 0.0.5

package/README.md

@@ -1,4 +1,4 @@
-# Frutjam Useful Prebuilt Plugins & UI Components for TailwindCSS
+## Frutjam Useful Prebuilt Plugins & UI Components for TailwindCSS
 
 Frutjam is a powerful library with an array of useful plugins and UI components created exclusively for use with Tailwind CSS. Whether you're creating a web app, a website, or a digital product, Frutjam offers a variety of tools to help you boost your development process and improve user experience. Furthermore, it provides numerous customization options within its plugins, allowing you to design your solutions precisely to your requirements.
 
@@ -43,7 +43,6 @@ Import the `Notification` class from Frutjam:
 
 ```typescript
 import { Notification } from "frutjam";
-import "frutjam/dist/notification.css";
 ```
 
 Create a new notification instance with custom configurations:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "frutjam",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Frutjam includes prebuilt UI components and plugins that are completely open-source",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -10,8 +10,10 @@
     "url": "git+https://github.com/nezanuha/frutjam.git"
   },
   "scripts": {
-    "dev": "tsup --watch",
-    "build": "tsup",
+    "dev-tsup": "tsup --watch",
+    "build-tsup": "tsup",
+    "dev": "webpack --watch --mode=development",
+    "build": "webpack --mode=production",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "keywords": [
@@ -29,9 +31,14 @@
   ],
   "devDependencies": {
     "autoprefixer": "^10.4.19",
-    "postcss": "^8.4.38",
+    "css-loader": "^7.1.1",
+    "postcss-loader": "^8.1.1",
+    "style-loader": "^4.0.0",
     "tailwindcss": "^3.4.3",
-    "tsup": "^8.0.2",
-    "typescript": "^5.4.5"
+    "terser-webpack-plugin": "^5.3.10",
+    "ts-loader": "^9.5.1",
+    "typescript": "^5.4.5",
+    "webpack": "^5.91.0",
+    "webpack-cli": "^5.1.4"
   }
 }

package/src/index.ts

@@ -1,3 +1,4 @@
 export { default as Notification } from './plugins/notification'
 export { default as TelephoneInput } from './plugins/telephoneInput'
-export { default as Popover } from './plugins/popover'
+export { default as Popover } from './plugins/popover'
+export { default as Tabs } from './plugins/tabs'

package/src/plugins/tabs/index.ts

@@ -0,0 +1,112 @@
+
+/*
+* Tabs
+* @version: 0.0.2
+* @author: Nezanuha
+* @license: Licensed under MIT
+* Copyright 2024 Nezanuha
+*/
+
+import { TabOptions } from "./types";
+
+export default class Tabs {
+    private tabs: HTMLElement[];
+    private tabContents: HTMLElement[];
+    private options: TabOptions;
+
+    constructor(options?: TabOptions) {
+        this.tabs = Array.from(document.querySelectorAll('.tab'));
+        this.tabContents = Array.from(document.querySelectorAll('.tab-content'));
+        this.options = options || {};
+
+        this.init();
+        this.handleInitialTabState();
+    }
+
+    private init() {
+        this.tabs.forEach(tab => {
+            tab.addEventListener('click', () => this.toggleTab(tab));
+        });
+    }
+
+    private toggleTab(selectedTab: HTMLElement) {
+        const tabId = selectedTab.dataset.tab;
+
+        if (!tabId || selectedTab.classList.contains('disabled')) return;
+
+        this.tabs.forEach(tab => {
+            tab.classList.remove('active');
+        });
+        selectedTab.classList.add('active');
+
+        this.tabContents.forEach(content => {
+            if (content.id === tabId) {
+                content.style.display = 'block';
+                this.animateTab(content);
+                if (this.options.onTabActive) {
+                    this.options.onTabActive(tabId);
+                }
+            } else {
+                content.style.display = 'none';
+            }
+        });
+    }
+
+    private animateTab(content: HTMLElement) {
+        // Implement your animation logic here
+        content.style.opacity = '0';
+        setTimeout(() => {
+            content.style.opacity = '1';
+        }, 300);
+    }
+
+    private handleInitialTabState() {
+        if (this.options.disableTabs === 'all') {
+            this.disableAllTabs();
+        } else if (Array.isArray(this.options.disableTabs)) {
+            this.disableTabs(this.options.disableTabs);
+        } else if (this.options.enableTabs === 'all') {
+            this.enableAllTabs();
+        } else if (Array.isArray(this.options.enableTabs)) {
+            this.enableTabs(this.options.enableTabs);
+        }
+    }
+
+    private disableAllTabs() {
+        this.tabs.forEach(tab => {
+            tab.classList.add('disabled');
+        });
+    }
+
+    private enableAllTabs() {
+        this.tabs.forEach(tab => {
+            tab.classList.remove('disabled');
+        });
+    }
+
+    enableTabs(tabIds?: string[] | 'all') {
+        if (tabIds === 'all') {
+            this.enableAllTabs();
+        } else if (Array.isArray(tabIds)) {
+            tabIds.forEach(tabId => {
+                const tab = this.tabs.find(tab => tab.dataset.tab === tabId);
+                if (tab) {
+                    tab.classList.remove('disabled');
+                }
+            });
+        }
+    }
+
+    disableTabs(tabIds?: string[] | 'all') {
+        if (tabIds === 'all') {
+            this.disableAllTabs();
+        } else if (Array.isArray(tabIds)) {
+            tabIds.forEach(tabId => {
+                const tab = this.tabs.find(tab => tab.dataset.tab === tabId);
+                if (tab) {
+                    tab.classList.add('disabled');
+                }
+            });
+        }
+    }
+}

package/src/plugins/tabs/types.ts

@@ -0,0 +1,7 @@
+type TabOptions = {
+    disableTabs?: string[] | 'all'; // Array of tab IDs to disable or 'all' to disable all tabs
+    enableTabs?: string[] | 'all'; // Array of tab IDs to enable or 'all' to enable all tabs
+    onTabActive?: (tabId: string) => void;
+};
+
+export type { TabOptions }