@aquera/nile-elements 0.0.127 → 0.0.129
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 +6 -0
- package/demo/index.html +87 -16
- package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
- package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
- package/dist/nile-code-editor/nile-code-editor.esm.js +1 -1
- package/dist/nile-tour/index.cjs.js +1 -1
- package/dist/nile-tour/index.esm.js +1 -1
- package/dist/nile-tour/nile-tour.cjs.js +2 -2
- package/dist/nile-tour/nile-tour.cjs.js.map +1 -1
- package/dist/nile-tour/nile-tour.css.cjs.js +1 -1
- package/dist/nile-tour/nile-tour.css.cjs.js.map +1 -1
- package/dist/nile-tour/nile-tour.css.esm.js +49 -13
- package/dist/nile-tour/nile-tour.esm.js +7 -7
- package/dist/src/nile-code-editor/nile-code-editor.js +1 -1
- package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
- package/dist/src/nile-tour/nile-tour.css.js +49 -13
- package/dist/src/nile-tour/nile-tour.css.js.map +1 -1
- package/dist/src/nile-tour/nile-tour.d.ts +20 -14
- package/dist/src/nile-tour/nile-tour.js +95 -29
- package/dist/src/nile-tour/nile-tour.js.map +1 -1
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +1 -1
- package/src/nile-code-editor/nile-code-editor.ts +1 -1
- package/src/nile-tour/nile-tour.css.ts +49 -13
- package/src/nile-tour/nile-tour.ts +165 -102
- package/vscode-html-custom-data.json +15 -1
package/README.md
CHANGED
|
@@ -79,6 +79,12 @@ To run a local development server that serves the basic demo located in `demo/in
|
|
|
79
79
|
|
|
80
80
|
In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
|
|
81
81
|
|
|
82
|
+
#### Version 0.0.129
|
|
83
|
+
- Nile Tour - Improvements
|
|
84
|
+
|
|
85
|
+
#### Version 0.0.128
|
|
86
|
+
- Nile Code Editor - Bracket support for top level autosuggestions feature fixes
|
|
87
|
+
|
|
82
88
|
#### Version 0.0.127
|
|
83
89
|
- Nile Code Editor - Bracket support for autosuggestions feature fixes and updates
|
|
84
90
|
|
package/demo/index.html
CHANGED
|
@@ -4,36 +4,107 @@
|
|
|
4
4
|
<head>
|
|
5
5
|
<meta charset="utf-8" />
|
|
6
6
|
<link rel="stylesheet" href="variables_v2.css" id="stylesheet" />
|
|
7
|
-
<link rel="stylesheet" href="index.css"
|
|
7
|
+
<link rel="stylesheet" href="index.css" />
|
|
8
|
+
<!-- Intro.js CSS from CDN -->
|
|
9
|
+
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/intro.js/minified/introjs.min.css" />
|
|
8
10
|
<script type="module" src="index.js"></script>
|
|
9
11
|
</head>
|
|
10
12
|
|
|
11
13
|
<body>
|
|
12
14
|
<div id="demo">
|
|
13
15
|
<div class="container">
|
|
14
|
-
<nile-icon name="search"></nile-icon>
|
|
15
|
-
<div class="stack frame-left-lg">
|
|
16
|
-
<h1>Setup Reports</h1>
|
|
17
|
-
<nile-checkbox
|
|
18
|
-
|
|
19
|
-
|
|
16
|
+
<nile-icon name="search" id="search-icon"></nile-icon>
|
|
17
|
+
<div class="stack frame-left-lg" id="report-setup">
|
|
18
|
+
<h1 id="title">Setup Reports</h1>
|
|
19
|
+
<nile-checkbox
|
|
20
|
+
label="This is label"
|
|
21
|
+
help-text="this is help text"
|
|
22
|
+
id="checkbox"
|
|
23
|
+
></nile-checkbox>
|
|
24
|
+
<nile-textarea
|
|
25
|
+
label="this is label"
|
|
26
|
+
help-text="i'm here to help you"
|
|
27
|
+
resize="vertical"
|
|
28
|
+
id="textarea"
|
|
29
|
+
></nile-textarea>
|
|
30
|
+
<nile-input label="Name of the report" required id="report-name">
|
|
20
31
|
<p slot="help" class="nds-help">2FA Enabled</p>
|
|
21
32
|
</nile-input>
|
|
22
|
-
<nile-input label="Password"></nile-input>
|
|
23
|
-
<nile-input label="City"></nile-input>
|
|
24
|
-
<nile-input label="Address"></nile-input>
|
|
25
|
-
<div class="stack--hor" slot="footer">
|
|
26
|
-
<nile-button>Save</nile-button>
|
|
27
|
-
<nile-button variant="secondary">Reset</nile-button>
|
|
28
|
-
<nile-button variant="tertiary">Help</nile-button>
|
|
33
|
+
<nile-input label="Password" id="password-input"></nile-input>
|
|
34
|
+
<nile-input label="City" id="city-input"></nile-input>
|
|
35
|
+
<nile-input label="Address" id="address-input"></nile-input>
|
|
36
|
+
<div class="stack--hor" slot="footer" id="footer-buttons">
|
|
37
|
+
<nile-button id="save-button">Save</nile-button>
|
|
38
|
+
<nile-button id="reset-button" variant="secondary">Reset</nile-button>
|
|
39
|
+
<nile-button id="help-button" variant="tertiary">Help</nile-button>
|
|
29
40
|
</div>
|
|
30
41
|
</div>
|
|
31
42
|
<div id="island">
|
|
32
|
-
<nile-button>Show Drawer</nile-button>
|
|
43
|
+
<nile-button id="drawer-button">Show Drawer</nile-button>
|
|
33
44
|
</div>
|
|
34
45
|
<div id="new-icons"></div>
|
|
35
46
|
</div>
|
|
36
47
|
</div>
|
|
48
|
+
|
|
49
|
+
<!-- Add the tour component -->
|
|
50
|
+
<nile-tour id="tour" show-backdrop="false" disable-interaction="false"></nile-tour>
|
|
51
|
+
|
|
52
|
+
<script>
|
|
53
|
+
// Reference to the tour element
|
|
54
|
+
const tourElement = document.getElementById('tour');
|
|
55
|
+
|
|
56
|
+
// Define the steps for the guided tour
|
|
57
|
+
tourElement.steps = [
|
|
58
|
+
{
|
|
59
|
+
stepNo: 1,
|
|
60
|
+
element: '#title',
|
|
61
|
+
title: 'Welcome to Reports',
|
|
62
|
+
content: 'This is the title section for setting up reports.',
|
|
63
|
+
position: 'bottom',
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
stepNo: 2,
|
|
67
|
+
element: '#report-name',
|
|
68
|
+
title: 'Report Name',
|
|
69
|
+
content: 'Enter the name of the report you want to create here.',
|
|
70
|
+
position: 'top',
|
|
71
|
+
beforeChange: () => { return false }
|
|
72
|
+
},
|
|
73
|
+
{
|
|
74
|
+
stepNo: 3,
|
|
75
|
+
element: '#checkbox',
|
|
76
|
+
title: 'Checkbox',
|
|
77
|
+
content: 'Select this checkbox for additional options.',
|
|
78
|
+
position: 'right',
|
|
79
|
+
},
|
|
80
|
+
{
|
|
81
|
+
stepNo: 4,
|
|
82
|
+
element: '#textarea',
|
|
83
|
+
title: 'Text Area',
|
|
84
|
+
content: 'Provide additional details about the report in this text area.',
|
|
85
|
+
position: 'top',
|
|
86
|
+
},
|
|
87
|
+
{
|
|
88
|
+
stepNo: 5,
|
|
89
|
+
element: '#footer-buttons',
|
|
90
|
+
title: 'Actions',
|
|
91
|
+
content: 'Use the Save, Reset, and Help buttons to manage your actions.',
|
|
92
|
+
position: 'left',
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
stepNo: 6,
|
|
96
|
+
element: '#drawer-button',
|
|
97
|
+
title: 'Show Drawer',
|
|
98
|
+
content: 'Click this button to open the drawer.',
|
|
99
|
+
position: 'right',
|
|
100
|
+
},
|
|
101
|
+
];
|
|
102
|
+
|
|
103
|
+
// Start the tour when the page loads
|
|
104
|
+
window.onload = () => {
|
|
105
|
+
tourElement.startTour();
|
|
106
|
+
};
|
|
107
|
+
</script>
|
|
37
108
|
</body>
|
|
38
109
|
|
|
39
|
-
</html>
|
|
110
|
+
</html>
|