frutjam 0.0.4 → 0.0.6

package/README.md

@@ -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.4",
+  "version": "0.0.6",
   "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 }