orcas-angular 2.1.1 → 2.1.2
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.
- package/package.json +5 -1
- package/ui/README.md +8 -0
- package/ui/context-menu/README.md +114 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "orcas-angular",
|
|
3
|
-
"version": "2.1.
|
|
3
|
+
"version": "2.1.2",
|
|
4
4
|
"description": "A collection of reusable Angular utilities and services, with support for Tauri and Capacitor.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -34,6 +34,10 @@
|
|
|
34
34
|
".": {
|
|
35
35
|
"types": "./types/orcas-angular.d.ts",
|
|
36
36
|
"default": "./fesm2022/orcas-angular.mjs"
|
|
37
|
+
},
|
|
38
|
+
"./styles.css": {
|
|
39
|
+
"style": "./styles.css",
|
|
40
|
+
"default": "./styles.css"
|
|
37
41
|
}
|
|
38
42
|
},
|
|
39
43
|
"sideEffects": false,
|
package/ui/README.md
CHANGED
|
@@ -8,6 +8,14 @@ Reusable UI components for the application. Currently contains the context menu
|
|
|
8
8
|
|
|
9
9
|
A fully self-contained context menu implementation built with Angular standalone components and directives. It handles viewport clamping automatically so that menus never render off-screen, and supports nested sub-menus.
|
|
10
10
|
|
|
11
|
+
**Required setup:** import the bundled stylesheet once in your application's global styles:
|
|
12
|
+
|
|
13
|
+
```css
|
|
14
|
+
@import "orcas-angular/styles.css";
|
|
15
|
+
```
|
|
16
|
+
|
|
17
|
+
See [`context-menu/README.md`](./context-menu/README.md) for usage, customization options, and skinning examples.
|
|
18
|
+
|
|
11
19
|
**Components and directives:**
|
|
12
20
|
|
|
13
21
|
| File | Selector | Description |
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
# context-menu
|
|
2
|
+
|
|
3
|
+
A self-contained context menu system built with Angular standalone components. Handles viewport clamping automatically and supports nested submenus.
|
|
4
|
+
|
|
5
|
+
## Components & directives
|
|
6
|
+
|
|
7
|
+
| Selector | Description |
|
|
8
|
+
|---|---|
|
|
9
|
+
| `<context-menu>` | Floating menu panel. Positioned by JS at (x, y). Use `[$isSubmenu]="true"` for nested menus. |
|
|
10
|
+
| `<context-button>` | Menu item. Accepts `danger` and `disabled` inputs. Add `hasSubmenu` to reveal a submenu on hover. |
|
|
11
|
+
| `<context-header>` | Non-interactive section label. |
|
|
12
|
+
| `[appContextMenu]` | Directive applied to any element. Intercepts right-click and opens the bound `<context-menu>`. Emits `beforeOpen` before showing. |
|
|
13
|
+
|
|
14
|
+
## Setup
|
|
15
|
+
|
|
16
|
+
Import the stylesheet once in your application's global styles:
|
|
17
|
+
|
|
18
|
+
```css
|
|
19
|
+
@import "orcas-angular/styles.css";
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Basic usage
|
|
23
|
+
|
|
24
|
+
```html
|
|
25
|
+
<div [appContextMenu]="menu" (beforeOpen)="prepareMenu()">
|
|
26
|
+
Right-click me
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
<context-menu #menu (close)="onClose()">
|
|
30
|
+
<context-header>Actions</context-header>
|
|
31
|
+
|
|
32
|
+
<context-button (click)="doSomething()">Do something</context-button>
|
|
33
|
+
|
|
34
|
+
<context-button danger (click)="deleteItem()">Delete</context-button>
|
|
35
|
+
|
|
36
|
+
<context-button hasSubmenu>
|
|
37
|
+
More…
|
|
38
|
+
<context-menu [$isSubmenu]="true">
|
|
39
|
+
<context-button (click)="doNested()">Nested action</context-button>
|
|
40
|
+
</context-menu>
|
|
41
|
+
</context-button>
|
|
42
|
+
</context-menu>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
## Customization
|
|
46
|
+
|
|
47
|
+
Styles are driven entirely by **CSS custom properties**. Override them after importing the stylesheet to skin the menus without touching component internals.
|
|
48
|
+
|
|
49
|
+
### Available variables
|
|
50
|
+
|
|
51
|
+
| Variable | Default | Description |
|
|
52
|
+
|---|---|---|
|
|
53
|
+
| `--oa-menu-bg` | `#ffffff` | Menu background |
|
|
54
|
+
| `--oa-menu-border-color` | `#e0e0e0` | Border color |
|
|
55
|
+
| `--oa-menu-text-color` | `#1e1e1e` | Primary text |
|
|
56
|
+
| `--oa-menu-text-secondary` | `#666666` | Secondary text (headers, arrow) |
|
|
57
|
+
| `--oa-menu-item-hover-bg` | `#f5f5f5` | Item hover background |
|
|
58
|
+
| `--oa-menu-item-danger-color` | `#ef4444` | Danger item text |
|
|
59
|
+
| `--oa-menu-item-danger-hover-bg` | `#ef4444` | Danger item hover background |
|
|
60
|
+
| `--oa-menu-item-danger-hover-text` | `#ffffff` | Danger item hover text |
|
|
61
|
+
| `--oa-menu-radius` | `4px` | Border radius |
|
|
62
|
+
| `--oa-menu-shadow` | Tailwind `shadow-lg` equivalent | Drop shadow |
|
|
63
|
+
| `--oa-menu-min-width` | `200px` | Minimum menu width |
|
|
64
|
+
| `--oa-menu-font-size` | `0.875rem` | Font size |
|
|
65
|
+
| `--oa-menu-z-index` | `50` | Root menu z-index |
|
|
66
|
+
| `--oa-menu-submenu-z-index` | `60` | Submenu z-index |
|
|
67
|
+
|
|
68
|
+
Dark mode defaults activate automatically when a `.dark` class is present on any ancestor element (typically `<html>`).
|
|
69
|
+
|
|
70
|
+
---
|
|
71
|
+
|
|
72
|
+
### Example 1 — plain CSS
|
|
73
|
+
|
|
74
|
+
```css
|
|
75
|
+
/* In your global stylesheet, after @import "orcas-angular/styles.css" */
|
|
76
|
+
|
|
77
|
+
:root {
|
|
78
|
+
--oa-menu-bg: #1a1a2e;
|
|
79
|
+
--oa-menu-border-color: #4a4a8a;
|
|
80
|
+
--oa-menu-text-color: #e0e0ff;
|
|
81
|
+
--oa-menu-text-secondary: #9090cc;
|
|
82
|
+
--oa-menu-item-hover-bg: #2a2a5e;
|
|
83
|
+
--oa-menu-radius: 8px;
|
|
84
|
+
}
|
|
85
|
+
```
|
|
86
|
+
|
|
87
|
+
### Example 2 — Tailwind v4 (map theme tokens to menu variables)
|
|
88
|
+
|
|
89
|
+
If your app uses Tailwind v4, its theme colors are already exposed as CSS variables. Point the menu variables at them instead of repeating hex values:
|
|
90
|
+
|
|
91
|
+
```css
|
|
92
|
+
/* In your global stylesheet */
|
|
93
|
+
@import "tailwindcss";
|
|
94
|
+
@import "orcas-angular/styles.css";
|
|
95
|
+
|
|
96
|
+
:root {
|
|
97
|
+
--oa-menu-bg: var(--color-white);
|
|
98
|
+
--oa-menu-border-color: var(--color-zinc-200);
|
|
99
|
+
--oa-menu-text-color: var(--color-zinc-900);
|
|
100
|
+
--oa-menu-text-secondary: var(--color-zinc-500);
|
|
101
|
+
--oa-menu-item-hover-bg: var(--color-zinc-100);
|
|
102
|
+
--oa-menu-radius: var(--radius-md, 6px);
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.dark {
|
|
106
|
+
--oa-menu-bg: var(--color-zinc-900);
|
|
107
|
+
--oa-menu-border-color: var(--color-zinc-700);
|
|
108
|
+
--oa-menu-text-color: var(--color-zinc-100);
|
|
109
|
+
--oa-menu-text-secondary: var(--color-zinc-400);
|
|
110
|
+
--oa-menu-item-hover-bg: var(--color-zinc-800);
|
|
111
|
+
}
|
|
112
|
+
```
|
|
113
|
+
|
|
114
|
+
> **Tailwind utility classes are not supported.** The library does not use Tailwind internally, so adding utility classes to menu elements (e.g. `class="bg-red-500"`) will have no effect unless those elements happen to be rendered in a context where your app's Tailwind stylesheet applies — which is fragile and not guaranteed. Always use CSS custom properties for customization.
|