@flxgde/gigamenu 0.0.1 → 0.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +127 -127
  2. package/fesm2022/flxgde-gigamenu.mjs +645 -0
  3. package/fesm2022/flxgde-gigamenu.mjs.map +1 -0
  4. package/package.json +43 -39
  5. package/styles.css +2 -0
  6. package/types/flxgde-gigamenu.d.ts +336 -0
  7. package/.github/workflows/publish.yml +0 -31
  8. package/ng-package.json +0 -8
  9. package/src/lib/frecency.service.ts +0 -185
  10. package/src/lib/gigamenu-templates.directive.ts +0 -178
  11. package/src/lib/gigamenu.component.html +0 -170
  12. package/src/lib/gigamenu.component.ts +0 -305
  13. package/src/lib/gigamenu.service.ts +0 -143
  14. package/src/lib/types.ts +0 -101
  15. package/src/public-api.ts +0 -6
  16. package/tsconfig.json +0 -14
  17. package/tsconfig.lib.json +0 -12
  18. package/tsconfig.lib.prod.json +0 -6
package/README.md CHANGED
@@ -1,127 +1,127 @@
1
- # Gigamenu
2
-
3
- A keyboard-driven command palette menu for Angular applications. Inspired by VS Code's Command Palette, Spotlight, and Linear's command menu.
4
-
5
- ## Features
6
-
7
- - Keyboard shortcuts: `Ctrl/Cmd+K` and `/` (when no input is focused)
8
- - Auto-discovery of routes from Angular Router
9
- - Manual command registration API
10
- - Full keyboard navigation (arrow keys, Enter, Escape)
11
- - Fuzzy search filtering
12
- - Dark mode support
13
- - Tailwind CSS styling
14
-
15
- ## Installation
16
-
17
- ```bash
18
- npm install gigamenu
19
- ```
20
-
21
- ## Usage
22
-
23
- ### 1. Import the component
24
-
25
- ```typescript
26
- import { Component, inject, OnInit } from '@angular/core';
27
- import { GigamenuComponent, GigamenuService } from 'gigamenu';
28
-
29
- @Component({
30
- selector: 'app-root',
31
- imports: [GigamenuComponent],
32
- template: `
33
- <router-outlet />
34
- <gm-gigamenu />
35
- `,
36
- })
37
- export class App implements OnInit {
38
- private readonly gigamenu = inject(GigamenuService);
39
-
40
- ngOnInit(): void {
41
- // Auto-discover routes from Angular Router
42
- this.gigamenu.discoverRoutes();
43
- }
44
- }
45
- ```
46
-
47
- ### 2. Register custom commands
48
-
49
- ```typescript
50
- this.gigamenu.registerCommand({
51
- id: 'cmd:toggle-dark',
52
- label: 'Toggle Dark Mode',
53
- description: 'Switch between light and dark theme',
54
- icon: '🌙',
55
- keywords: ['theme', 'dark', 'light'],
56
- action: () => document.documentElement.classList.toggle('dark'),
57
- });
58
- ```
59
-
60
- ### 3. Register custom pages
61
-
62
- ```typescript
63
- this.gigamenu.registerPage({
64
- id: 'page:dashboard',
65
- label: 'Dashboard',
66
- path: '/dashboard',
67
- description: 'Go to the main dashboard',
68
- });
69
- ```
70
-
71
- ## API
72
-
73
- ### GigamenuService
74
-
75
- | Method | Description |
76
- |--------|-------------|
77
- | `open()` | Open the menu |
78
- | `close()` | Close the menu |
79
- | `toggle()` | Toggle menu visibility |
80
- | `discoverRoutes(routes?)` | Auto-discover pages from Angular Router |
81
- | `registerCommand(command)` | Register a custom command |
82
- | `registerPage(page)` | Register a custom page |
83
- | `registerItem(item)` | Register a generic menu item |
84
- | `unregisterItem(id)` | Remove an item by ID |
85
- | `configure(config)` | Update configuration |
86
-
87
- ### Configuration
88
-
89
- ```typescript
90
- interface GigamenuConfig {
91
- placeholder?: string; // Search input placeholder
92
- maxResults?: number; // Maximum items to show (default: 10)
93
- autoDiscoverRoutes?: boolean; // Auto-discover on init
94
- }
95
- ```
96
-
97
- ### Types
98
-
99
- ```typescript
100
- interface GigamenuItem {
101
- id: string;
102
- label: string;
103
- description?: string;
104
- icon?: string;
105
- keywords?: string[];
106
- category: 'page' | 'command';
107
- action: () => void;
108
- }
109
- ```
110
-
111
- ## Keyboard Shortcuts
112
-
113
- | Shortcut | Action |
114
- |----------|--------|
115
- | `Ctrl/Cmd+K` | Open menu |
116
- | `/` | Open menu (when no input focused) |
117
- | `↑` / `↓` | Navigate items |
118
- | `Enter` | Execute selected item |
119
- | `Escape` | Close menu |
120
-
121
- ## Styling
122
-
123
- Gigamenu uses Tailwind CSS and supports dark mode via the `dark` class on `<html>`.
124
-
125
- ## License
126
-
127
- MIT
1
+ # Gigamenu
2
+
3
+ A keyboard-driven command palette menu for Angular applications. Inspired by VS Code's Command Palette, Spotlight, and Linear's command menu.
4
+
5
+ ## Features
6
+
7
+ - Keyboard shortcuts: `Ctrl/Cmd+K` and `/` (when no input is focused)
8
+ - Auto-discovery of routes from Angular Router
9
+ - Manual command registration API
10
+ - Full keyboard navigation (arrow keys, Enter, Escape)
11
+ - Fuzzy search filtering
12
+ - Dark mode support
13
+ - Tailwind CSS styling
14
+
15
+ ## Installation
16
+
17
+ ```bash
18
+ npm install gigamenu
19
+ ```
20
+
21
+ ## Usage
22
+
23
+ ### 1. Import the component
24
+
25
+ ```typescript
26
+ import { Component, inject, OnInit } from '@angular/core';
27
+ import { GigamenuComponent, GigamenuService } from 'gigamenu';
28
+
29
+ @Component({
30
+ selector: 'app-root',
31
+ imports: [GigamenuComponent],
32
+ template: `
33
+ <router-outlet />
34
+ <gm-gigamenu />
35
+ `,
36
+ })
37
+ export class App implements OnInit {
38
+ private readonly gigamenu = inject(GigamenuService);
39
+
40
+ ngOnInit(): void {
41
+ // Auto-discover routes from Angular Router
42
+ this.gigamenu.discoverRoutes();
43
+ }
44
+ }
45
+ ```
46
+
47
+ ### 2. Register custom commands
48
+
49
+ ```typescript
50
+ this.gigamenu.registerCommand({
51
+ id: 'cmd:toggle-dark',
52
+ label: 'Toggle Dark Mode',
53
+ description: 'Switch between light and dark theme',
54
+ icon: '🌙',
55
+ keywords: ['theme', 'dark', 'light'],
56
+ action: () => document.documentElement.classList.toggle('dark'),
57
+ });
58
+ ```
59
+
60
+ ### 3. Register custom pages
61
+
62
+ ```typescript
63
+ this.gigamenu.registerPage({
64
+ id: 'page:dashboard',
65
+ label: 'Dashboard',
66
+ path: '/dashboard',
67
+ description: 'Go to the main dashboard',
68
+ });
69
+ ```
70
+
71
+ ## API
72
+
73
+ ### GigamenuService
74
+
75
+ | Method | Description |
76
+ |--------|-------------|
77
+ | `open()` | Open the menu |
78
+ | `close()` | Close the menu |
79
+ | `toggle()` | Toggle menu visibility |
80
+ | `discoverRoutes(routes?)` | Auto-discover pages from Angular Router |
81
+ | `registerCommand(command)` | Register a custom command |
82
+ | `registerPage(page)` | Register a custom page |
83
+ | `registerItem(item)` | Register a generic menu item |
84
+ | `unregisterItem(id)` | Remove an item by ID |
85
+ | `configure(config)` | Update configuration |
86
+
87
+ ### Configuration
88
+
89
+ ```typescript
90
+ interface GigamenuConfig {
91
+ placeholder?: string; // Search input placeholder
92
+ maxResults?: number; // Maximum items to show (default: 10)
93
+ autoDiscoverRoutes?: boolean; // Auto-discover on init
94
+ }
95
+ ```
96
+
97
+ ### Types
98
+
99
+ ```typescript
100
+ interface GigamenuItem {
101
+ id: string;
102
+ label: string;
103
+ description?: string;
104
+ icon?: string;
105
+ keywords?: string[];
106
+ category: 'page' | 'command';
107
+ action: () => void;
108
+ }
109
+ ```
110
+
111
+ ## Keyboard Shortcuts
112
+
113
+ | Shortcut | Action |
114
+ |----------|--------|
115
+ | `Ctrl/Cmd+K` | Open menu |
116
+ | `/` | Open menu (when no input focused) |
117
+ | `↑` / `↓` | Navigate items |
118
+ | `Enter` | Execute selected item |
119
+ | `Escape` | Close menu |
120
+
121
+ ## Styling
122
+
123
+ Gigamenu uses Tailwind CSS and supports dark mode via the `dark` class on `<html>`.
124
+
125
+ ## License
126
+
127
+ MIT