@aquera/nile-elements 0.1.18 → 0.1.20
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 +7 -0
- package/demo/index.html +111 -16
- package/demo/variables.css +12 -0
- package/demo/variables_v2.css +12 -0
- 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/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 +33 -19
- package/dist/nile-tour/nile-tour.esm.js +11 -2
- 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 +31 -17
- package/dist/src/nile-tour/nile-tour.css.js.map +1 -1
- package/dist/src/nile-tour/nile-tour.d.ts +6 -29
- package/dist/src/nile-tour/nile-tour.js +70 -76
- 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 +31 -17
- package/src/nile-tour/nile-tour.ts +86 -95
- package/vscode-html-custom-data.json +1 -5
package/README.md
CHANGED
|
@@ -79,6 +79,13 @@ 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.1.20
|
|
83
|
+
- Fixes: width token typo
|
|
84
|
+
- Dependency nile 0.3.57
|
|
85
|
+
|
|
86
|
+
#### Version 0.1.19
|
|
87
|
+
- Nile Tour: Improvements
|
|
88
|
+
- Dependency nile 0.3.56
|
|
82
89
|
|
|
83
90
|
#### Version 0.1.18
|
|
84
91
|
- Nile Select: nile-clear event update, select dropdown close flicker fixed
|
package/demo/index.html
CHANGED
|
@@ -13,34 +13,129 @@
|
|
|
13
13
|
.flex-container {
|
|
14
14
|
display: flex;
|
|
15
15
|
flex-wrap: wrap;
|
|
16
|
-
gap: 30px;
|
|
16
|
+
gap: 30px;
|
|
17
17
|
padding: 0;
|
|
18
18
|
margin: 0;
|
|
19
19
|
border: 1px solid silver;
|
|
20
|
-
|
|
21
20
|
height: 900px;
|
|
22
21
|
}
|
|
23
22
|
|
|
24
23
|
nile-button {
|
|
25
|
-
flex: 0 0 auto;
|
|
26
|
-
|
|
27
|
-
padding: 10px 20px;
|
|
28
|
-
border: 1px solid #ccc;
|
|
24
|
+
flex: 0 0 auto;
|
|
25
|
+
height: 38px;
|
|
29
26
|
}
|
|
30
27
|
</style>
|
|
31
|
-
|
|
32
|
-
<nile-tour id="tour" .showBackdrop="false" .disableInteraction="false"></nile-tour>
|
|
28
|
+
|
|
33
29
|
<body>
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
30
|
+
|
|
31
|
+
<!-- Add the tour component -->
|
|
32
|
+
<nile-tour id="tour" .showBackdrop="false" ></nile-tour>
|
|
33
|
+
|
|
34
|
+
<div class="flex-container" id="button-container">
|
|
35
|
+
<nile-button id="button1" data-tour="button1" variant="primary">Button 1</nile-button>
|
|
36
|
+
<nile-button id="button2" data-tour="button2" variant="primary">Button 2</nile-button>
|
|
37
37
|
</div>
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
38
|
+
|
|
39
|
+
<script>
|
|
40
|
+
const tourElement = document.getElementById("tour");
|
|
41
|
+
|
|
42
|
+
function startTour() {
|
|
43
|
+
console.log("Starting tour...");
|
|
44
|
+
tourElement.startTour();
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
// Initialize tour steps
|
|
48
|
+
window.onload = () => {
|
|
49
|
+
tourElement.stepsJson = [
|
|
50
|
+
{
|
|
51
|
+
stepNo: 1,
|
|
52
|
+
element: "button1",
|
|
53
|
+
title: "Welcome to Reports",
|
|
54
|
+
content: "This is the title section for setting up reports.",
|
|
55
|
+
position: "bottom-middle-aligned",
|
|
56
|
+
disablePrev: true,
|
|
57
|
+
beforeChange: () => {
|
|
58
|
+
console.log("Before moving from Step 1");
|
|
59
|
+
return true; // Return false to prevent moving forward
|
|
60
|
+
},
|
|
61
|
+
afterChange: () => {
|
|
62
|
+
console.log("After arriving at Step 1");
|
|
63
|
+
}
|
|
64
|
+
},
|
|
65
|
+
{
|
|
66
|
+
stepNo: 2,
|
|
67
|
+
element: "button2",
|
|
68
|
+
title: "Checkbox",
|
|
69
|
+
content: "Select this checkbox for additional options.",
|
|
70
|
+
position: "bottom-middle-aligned",
|
|
71
|
+
beforeChange: () => {
|
|
72
|
+
console.log("Before moving from Step 2");
|
|
73
|
+
return true;
|
|
74
|
+
},
|
|
75
|
+
afterChange: () => {
|
|
76
|
+
console.log("After arriving at Step 2");
|
|
42
77
|
}
|
|
43
|
-
|
|
78
|
+
},
|
|
79
|
+
{
|
|
80
|
+
stepNo: 3,
|
|
81
|
+
element: "button3",
|
|
82
|
+
title: "Text Area",
|
|
83
|
+
content: "Provide additional details about the report in this text area.",
|
|
84
|
+
position: "bottom-middle-aligned",
|
|
85
|
+
beforeChange: () => {
|
|
86
|
+
console.log("Before moving from Step 3");
|
|
87
|
+
return true;
|
|
88
|
+
},
|
|
89
|
+
afterChange: () => {
|
|
90
|
+
console.log("After arriving at Step 3");
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
{
|
|
94
|
+
stepNo: 4,
|
|
95
|
+
element: "button4",
|
|
96
|
+
title: "Actions",
|
|
97
|
+
content: "Use the Save, Reset, and Help buttons to manage your actions.",
|
|
98
|
+
position: "bottom-middle-aligned",
|
|
99
|
+
disableNext: true,
|
|
100
|
+
beforeChange: () => {
|
|
101
|
+
console.log("Before moving from Step 4");
|
|
102
|
+
return true;
|
|
103
|
+
},
|
|
104
|
+
afterChange: () => {
|
|
105
|
+
console.log("After arriving at Step 4");
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
];
|
|
109
|
+
|
|
110
|
+
setTimeout(startTour, 1000);
|
|
111
|
+
};
|
|
112
|
+
|
|
113
|
+
// Add new buttons dynamically after 5 seconds
|
|
114
|
+
setTimeout(() => {
|
|
115
|
+
const container = document.getElementById("button-container");
|
|
116
|
+
|
|
117
|
+
const button3 = document.createElement("nile-button");
|
|
118
|
+
button3.id = "button3";
|
|
119
|
+
button3.setAttribute("data-tour", "button3");
|
|
120
|
+
button3.setAttribute("variant", "primary");
|
|
121
|
+
button3.textContent = "Button 3";
|
|
122
|
+
container.appendChild(button3);
|
|
123
|
+
|
|
124
|
+
const button4 = document.createElement("nile-button");
|
|
125
|
+
button4.id = "button4";
|
|
126
|
+
button4.setAttribute("data-tour", "button4");
|
|
127
|
+
button4.setAttribute("variant", "primary");
|
|
128
|
+
button4.textContent = "Button 4";
|
|
129
|
+
container.appendChild(button4);
|
|
130
|
+
|
|
131
|
+
// Wait for buttons to be added before updating the tour
|
|
132
|
+
// setTimeout(() => {
|
|
133
|
+
// console.log(tourElement);
|
|
134
|
+
// startTour();
|
|
135
|
+
// }, 500);
|
|
136
|
+
}, 7000);
|
|
137
|
+
</script>
|
|
138
|
+
|
|
44
139
|
</body>
|
|
45
140
|
|
|
46
141
|
</html>
|
package/demo/variables.css
CHANGED
|
@@ -130,6 +130,18 @@
|
|
|
130
130
|
--nile-slide-toggle-color-indicator: var(--nile-colors-white-base);
|
|
131
131
|
--nile-slide-toggle-color-background-inactive: var(--nile-colors-neutral-500);
|
|
132
132
|
--nile-slide-toggle-color-background-active: var(--nile-colors-primary-600);
|
|
133
|
+
--nile-sizes-width-xxs: 320px; /* 80 (320px) */
|
|
134
|
+
--nile-sizes-width-xs: 384px; /* 96 (384px) */
|
|
135
|
+
--nile-sizes-width-xl: 768px; /* 192 (768px) */
|
|
136
|
+
--nile-sizes-width-sm: 480px; /* 120 (480px) */
|
|
137
|
+
--nile-sizes-width-md: 560px; /* 140 (560px) */
|
|
138
|
+
--nile-sizes-width-lg: 640px; /* 160 (640px) */
|
|
139
|
+
--nile-sizes-width-6xl: 1920px; /* 480 (1,920px) */
|
|
140
|
+
--nile-sizes-width-5xl: 1600px; /* 400 (1,600px) */
|
|
141
|
+
--nile-sizes-width-4xl: 1440px; /* 360 (1,440px) */
|
|
142
|
+
--nile-sizes-width-3xl: 1280px; /* 320 (1,280px) */
|
|
143
|
+
--nile-sizes-width-2xl: 1024px; /* 256 (1,024px) */
|
|
144
|
+
--nile-sizes-paragraph-max-width: 720px; /* 180 (720px) */
|
|
133
145
|
--nile-sidebar-wrapper-overlay-background-color: var(--nile-colors-dark-900);
|
|
134
146
|
--nile-sidebar-menu-background-color: var(--nile-colors-dark-200);
|
|
135
147
|
--nile-section-message-icon-background-color-warning: var(--nile-colors-yellow-700);
|
package/demo/variables_v2.css
CHANGED
|
@@ -130,6 +130,18 @@
|
|
|
130
130
|
--nile-slide-toggle-color-indicator: #FFFFFF;
|
|
131
131
|
--nile-slide-toggle-color-background-inactive: #F2F4F7;
|
|
132
132
|
--nile-slide-toggle-color-background-active: #005EA6;
|
|
133
|
+
--nile-sizes-width-xxs: 320px; /* 80 (320px) */
|
|
134
|
+
--nile-sizes-width-xs: 384px; /* 96 (384px) */
|
|
135
|
+
--nile-sizes-width-xl: 768px; /* 192 (768px) */
|
|
136
|
+
--nile-sizes-width-sm: 480px; /* 120 (480px) */
|
|
137
|
+
--nile-sizes-width-md: 560px; /* 140 (560px) */
|
|
138
|
+
--nile-sizes-width-lg: 640px; /* 160 (640px) */
|
|
139
|
+
--nile-sizes-width-6xl: 1920px; /* 480 (1,920px) */
|
|
140
|
+
--nile-sizes-width-5xl: 1600px; /* 400 (1,600px) */
|
|
141
|
+
--nile-sizes-width-4xl: 1440px; /* 360 (1,440px) */
|
|
142
|
+
--nile-sizes-width-3xl: 1280px; /* 320 (1,280px) */
|
|
143
|
+
--nile-sizes-width-2xl: 1024px; /* 256 (1,024px) */
|
|
144
|
+
--nile-sizes-paragraph-max-width: 720px; /* 180 (720px) */
|
|
133
145
|
--nile-sidebar-wrapper-overlay-background-color: #0C111D;
|
|
134
146
|
--nile-sidebar-menu-background-color: #f2f4f7;
|
|
135
147
|
--nile-section-message-icon-background-color-warning: #b89219;
|