dash-button-web 0.0.15-beta.1 → 0.0.16
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 +1 -1
- package/readme.md +48 -25
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -7,7 +7,7 @@ Developing a dash button web component based on the [Stencil.js](https://stencil
|
|
|
7
7
|
To install the dash-button web component, copy and paste it into your frontend application.
|
|
8
8
|
|
|
9
9
|
```sh
|
|
10
|
-
<script type='module' src='https://unpkg.com/dash-button-web@0.0.
|
|
10
|
+
<script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
|
|
11
11
|
```
|
|
12
12
|
|
|
13
13
|
You can find the NPM package named [dash-button-web](https://www.npmjs.com/package/dash-button-web "dash-button-web").
|
|
@@ -65,41 +65,57 @@ import { CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
|
|
|
65
65
|
Next, you need to put the script file path in the **src/index.html** file header section as follows.
|
|
66
66
|
|
|
67
67
|
|
|
68
|
+
```sh
|
|
69
|
+
<script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
|
|
70
|
+
```
|
|
71
|
+
|
|
72
|
+
|
|
73
|
+
```sh
|
|
74
|
+
Note: Starting from v0.0.16, you need to add the FontAwesome stylesheet file to your application. If your application is already using this package, you can ignore this.
|
|
75
|
+
|
|
76
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
|
|
77
|
+
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Therefore, the header section of your index file should look like this:
|
|
81
|
+
|
|
68
82
|
```sh
|
|
69
83
|
<head>
|
|
70
84
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
71
85
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
86
|
+
|
|
87
|
+
<script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
|
|
88
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css" />
|
|
89
|
+
...
|
|
75
90
|
```
|
|
76
91
|
|
|
77
92
|
After that, you can pass configuration options as follows using the web component.
|
|
78
93
|
|
|
79
94
|
#### Configuration options
|
|
80
95
|
|
|
81
|
-
|
|
|
82
|
-
|
|
|
83
|
-
| `
|
|
84
|
-
| `
|
|
85
|
-
| `realm`
|
|
86
|
-
| `
|
|
87
|
-
| `
|
|
88
|
-
| `
|
|
89
|
-
| `
|
|
90
|
-
| `
|
|
91
|
-
| `
|
|
92
|
-
| `
|
|
93
|
-
| `
|
|
94
|
-
| `
|
|
95
|
-
| `
|
|
96
|
+
| Attribute | Description | Type | Default |
|
|
97
|
+
| ----------------- | ----------- | --------- | ------------------------- |
|
|
98
|
+
| `client-id` | `Keycloak client ID` | `string` | `` |
|
|
99
|
+
| `keycloak-uri` | `Keycloak server URI` | `string` | `"http://localhost:8080"` |
|
|
100
|
+
| `realm` |`Keycloak realm`| `string` | `` |
|
|
101
|
+
| `redirect-uri` | `Application redirect URI` | `string` | `` |
|
|
102
|
+
| `show-post-login-text` | `Successfully logged in shows a custom button message` | `boolean` | `false` |
|
|
103
|
+
| `auth-method` | `Authentication method` | `string` | `check-sso`, `(login-required)` |
|
|
104
|
+
| `app-id` | `Application unique ID` | `string` | `` |
|
|
105
|
+
| `portal-url` | `Portal URL` | `string` | `` |
|
|
106
|
+
| `marketplace-url` | `Marketplace URL` | `string` | `` |
|
|
107
|
+
| `show-unauthorized-modal` | `Show unauthorized modal` | `boolean` | `false` |
|
|
108
|
+
| `other-link-type` | `Add new links for the menu` | `string` | `local or global` |
|
|
109
|
+
| `application-display-name` | `Menu application display name` | `string` | `Applications` |
|
|
110
|
+
| `disable-application-tab` | `disable application tab` | `boolean` | `false` |
|
|
111
|
+
| `menu-view-type` | `the style of the menu` | `string` | `grid/list` |
|
|
96
112
|
|
|
97
113
|
#### Theme Configuration options
|
|
98
114
|
|
|
99
|
-
|
|
|
100
|
-
|
|
|
101
|
-
| `
|
|
102
|
-
| `
|
|
115
|
+
| Attribute | Description | Type | Default |
|
|
116
|
+
| ----------------- | ----------- | --------- | ------------------------- |
|
|
117
|
+
| `primary-color` | `Set primary colour` | `string` | `` |
|
|
118
|
+
| `accent-color` | `Set secondary or accent color` | `string` | `` |
|
|
103
119
|
|
|
104
120
|
|
|
105
121
|
**AuthMethod**
|
|
@@ -128,7 +144,8 @@ First, you need to import the script tag into the header section of your main HT
|
|
|
128
144
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
129
145
|
<link rel="icon" type="image/x-icon" href="favicon.ico">
|
|
130
146
|
...
|
|
131
|
-
|
|
147
|
+
<script type='module' src='https://unpkg.com/dash-button-web@0.0.16/dist/esm/web-compnont.js'></script>
|
|
148
|
+
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css"
|
|
132
149
|
...
|
|
133
150
|
```
|
|
134
151
|
|
|
@@ -140,7 +157,13 @@ After that, all you need to do is place the dash button in your preferred locati
|
|
|
140
157
|
|
|
141
158
|
That's it, enjoy!
|
|
142
159
|
|
|
143
|
-
##### Changelog:
|
|
160
|
+
##### Changelog:
|
|
161
|
+
v0.0.16
|
|
162
|
+
- Added customization option to change the main menu view type.
|
|
163
|
+
- Added a new option to retrieve the main menu list and display it from the portal API.
|
|
164
|
+
- Replaced all icons with FontAwesome. (Any third-party application now needs to import FontAwesome.)
|
|
165
|
+
|
|
166
|
+
v0.0.15
|
|
144
167
|
- Added configuration option to customize the application name in the menu.
|
|
145
168
|
- Introduced feature to disable the application tab.
|
|
146
169
|
- Display user profile photo in the dashboard button.
|