@moraby/app-launcher 2.0.2 → 2.0.5
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/README.md +47 -2
- package/dist/app-launcher-element.global.js +67 -0
- package/dist/app-launcher-element.mjs +67 -0
- package/dist/index.css +1 -754
- package/dist/index.js +1 -775
- package/dist/index.mjs +1 -785
- package/package.json +5 -1
- package/dist/index.css.map +0 -1
- package/dist/index.js.map +0 -1
- package/dist/index.mjs.map +0 -1
package/README.md
CHANGED
|
@@ -12,9 +12,54 @@ yarn add @moraby/app-launcher
|
|
|
12
12
|
|
|
13
13
|
## Usage
|
|
14
14
|
|
|
15
|
-
###
|
|
15
|
+
### React / Next.js
|
|
16
16
|
|
|
17
|
-
|
|
17
|
+
Import and use the component as usual:
|
|
18
|
+
|
|
19
|
+
```tsx
|
|
20
|
+
import { AppLauncher } from '@moraby/app-launcher';
|
|
21
|
+
import '@moraby/app-launcher/styles.css';
|
|
22
|
+
|
|
23
|
+
function MyApp() {
|
|
24
|
+
return <AppLauncher configUrl="/apps.json" />;
|
|
25
|
+
}
|
|
26
|
+
```
|
|
27
|
+
|
|
28
|
+
### HTML / Vanilla JavaScript (Web Component)
|
|
29
|
+
|
|
30
|
+
You can use the bundled Web Component version which includes all dependencies (React/ReactDOM).
|
|
31
|
+
|
|
32
|
+
**Option 1: Using via CDN (No Build Step)**
|
|
33
|
+
|
|
34
|
+
```html
|
|
35
|
+
<!-- Load the script (includes React + AppLauncher) -->
|
|
36
|
+
<script src="https://unpkg.com/@moraby/app-launcher/dist/app-launcher-element.global.js"></script>
|
|
37
|
+
<!-- Load styles -->
|
|
38
|
+
<link rel="stylesheet" href="https://unpkg.com/@moraby/app-launcher/dist/index.css" />
|
|
39
|
+
|
|
40
|
+
<!-- Use the component -->
|
|
41
|
+
<app-launcher
|
|
42
|
+
default-apps='[{"id":"1","name":"Dashboard","url":"/","icon":"MdDashboard","color":"#4285F4"}]'
|
|
43
|
+
class-name="my-launcher"
|
|
44
|
+
></app-launcher>
|
|
45
|
+
|
|
46
|
+
<script>
|
|
47
|
+
// You can also interact with it via JS
|
|
48
|
+
const launcher = document.querySelector('app-launcher');
|
|
49
|
+
</script>
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
**Option 2: From NPM**
|
|
53
|
+
|
|
54
|
+
```html
|
|
55
|
+
<script src="./node_modules/@moraby/app-launcher/dist/app-launcher-element.global.js"></script>
|
|
56
|
+
<link rel="stylesheet" href="./node_modules/@moraby/app-launcher/dist/index.css" />
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
#### Attributes
|
|
60
|
+
|
|
61
|
+
- `default-apps`: JSON string defining the apps to show.
|
|
62
|
+
- `class-name`: Custom class name for the wrapper.
|
|
18
63
|
|
|
19
64
|
```tsx
|
|
20
65
|
import { LocalAppLauncher } from '@moraby/app-launcher';
|