@aquera/nile-elements 0.1.2 → 0.1.4

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.
Files changed (42) hide show
  1. package/README.md +8 -0
  2. package/demo/index.html +108 -94
  3. package/dist/nile-code-editor/extensionSetup.cjs.js.map +1 -1
  4. package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
  5. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  6. package/dist/nile-code-editor/nile-code-editor.esm.js +2 -2
  7. package/dist/nile-drawer/nile-drawer.css.cjs.js +1 -1
  8. package/dist/nile-drawer/nile-drawer.css.cjs.js.map +1 -1
  9. package/dist/nile-drawer/nile-drawer.css.esm.js +1 -1
  10. package/dist/nile-form-help-text/nile-form-help-text.cjs.js +1 -1
  11. package/dist/nile-form-help-text/nile-form-help-text.cjs.js.map +1 -1
  12. package/dist/nile-form-help-text/nile-form-help-text.esm.js +2 -2
  13. package/dist/nile-tour/nile-tour.cjs.js +1 -1
  14. package/dist/nile-tour/nile-tour.cjs.js.map +1 -1
  15. package/dist/nile-tour/nile-tour.css.cjs.js +1 -1
  16. package/dist/nile-tour/nile-tour.css.cjs.js.map +1 -1
  17. package/dist/nile-tour/nile-tour.css.esm.js +112 -23
  18. package/dist/nile-tour/nile-tour.esm.js +1 -1
  19. package/dist/src/nile-code-editor/extensionSetup.d.ts +8 -9
  20. package/dist/src/nile-code-editor/extensionSetup.js +0 -13
  21. package/dist/src/nile-code-editor/extensionSetup.js.map +1 -1
  22. package/dist/src/nile-code-editor/nile-code-editor.d.ts +19 -0
  23. package/dist/src/nile-code-editor/nile-code-editor.js +61 -2
  24. package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  25. package/dist/src/nile-drawer/nile-drawer.css.js +1 -1
  26. package/dist/src/nile-drawer/nile-drawer.css.js.map +1 -1
  27. package/dist/src/nile-form-help-text/nile-form-help-text.js +32 -2
  28. package/dist/src/nile-form-help-text/nile-form-help-text.js.map +1 -1
  29. package/dist/src/nile-tour/nile-tour.css.js +110 -21
  30. package/dist/src/nile-tour/nile-tour.css.js.map +1 -1
  31. package/dist/src/nile-tour/nile-tour.d.ts +1 -1
  32. package/dist/src/nile-tour/nile-tour.js +23 -5
  33. package/dist/src/nile-tour/nile-tour.js.map +1 -1
  34. package/dist/tsconfig.tsbuildinfo +1 -1
  35. package/package.json +1 -1
  36. package/src/nile-code-editor/extensionSetup.ts +8 -23
  37. package/src/nile-code-editor/nile-code-editor.ts +59 -3
  38. package/src/nile-drawer/nile-drawer.css.ts +1 -1
  39. package/src/nile-form-help-text/nile-form-help-text.ts +37 -3
  40. package/src/nile-tour/nile-tour.css.ts +110 -21
  41. package/src/nile-tour/nile-tour.ts +25 -6
  42. package/vscode-html-custom-data.json +7 -3
package/README.md CHANGED
@@ -79,6 +79,14 @@ 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.4
83
+ - Nile Tour - Restructure and New theme
84
+
85
+ #### Version 0.1.3
86
+ - Nile Code Editor - HTML language support available
87
+ - Nile Form Help Text - Help message UI fixes
88
+ - Nile Drawer - Spacing in close icon and header-actions slot increased
89
+
82
90
  #### Version 0.1.2
83
91
  - Nile Code Editor - Property added customCompletionsPaths (recieves list of paths to be used for custom completions suggestions)
84
92
 
package/demo/index.html CHANGED
@@ -10,101 +10,115 @@
10
10
  <script type="module" src="index.js"></script>
11
11
  </head>
12
12
 
13
+
14
+ <style>
15
+ .flex-container {
16
+ display: flex;
17
+ flex-wrap: wrap;
18
+ gap: 30px; /* Space between items */
19
+ padding: 0;
20
+ margin: 0;
21
+ border: 1px solid silver;
22
+
23
+ height: 900px;
24
+ }
25
+
26
+ nile-button {
27
+ flex: 0 0 auto; /* Prevent items from stretching */
28
+ background-color: lightgray;
29
+ padding: 10px 20px;
30
+ border: 1px solid #ccc;
31
+ }
32
+ </style>
33
+
34
+
35
+ <!-- Add the tour component -->
36
+ <nile-tour id="tour" .showBackdrop="false" .disableInteraction="false"></nile-tour>
37
+
38
+
13
39
  <body>
14
- <div id="demo">
15
- <div class="container">
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">
31
- <p slot="help" class="nds-help">2FA Enabled</p>
32
- </nile-input>
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>
40
- </div>
41
- </div>
42
- <div id="island">
43
- <nile-button id="drawer-button">Show Drawer</nile-button>
44
- </div>
45
- <div id="new-icons"></div>
46
- </div>
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>
40
+ <div class="flex-container wrap" id="button-container"></div>
41
+
42
+
43
+
44
+
45
+ <style>
46
+ .frame-left-lg {
47
+ padding-left: 4rem;
48
+ margin-left: 208px;
49
+ }
50
+ </style>
51
+ <script>
52
+ const container = document.getElementById("button-container");
53
+ const tourElement = document.getElementById("tour");
54
+
55
+ // Define an array of random titles and contents
56
+ const titles = [
57
+ "Welcome to Reports", "Checkbox", "Text Area", "Actions",
58
+ "Submit Form", "Edit Item", "Delete Item", "View Details", "Settings"
59
+ ];
60
+
61
+ const contents = [
62
+ "This is the title section for setting up reports.",
63
+ "Select this checkbox for additional options.",
64
+ "Provide additional details about the report in this text area.",
65
+ "Use the Save, Reset, and Help buttons to manage your actions.",
66
+ "Click to submit your changes.",
67
+ "Click to edit this item.",
68
+ "Click to delete this item.",
69
+ "Click to view more details.",
70
+ "Change settings here."
71
+ ];
72
+
73
+ // Generate 100 buttons with random content and data-tour attributes
74
+ tourElement.steps = [];
75
+ for (let i = 1; i <= 80; i++) {
76
+ const button = document.createElement("nile-button");
77
+ const stepNo = i;
78
+ const elementId = `${i}`;
79
+ button.setAttribute("data-tour", stepNo);
80
+ button.setAttribute("variant", "secondary");
81
+ button.textContent = `Button ${i}`;
82
+
83
+ // Assign random content for the tour steps
84
+ const randomTitle = titles[Math.floor(Math.random() * titles.length)];
85
+ const randomContent = contents[Math.floor(Math.random() * contents.length)];
86
+
87
+ // Create random position (top, left, right, bottom)
88
+ const positions = [
89
+ "top", "bottom", "left", "right",
90
+ "top-right-aligned", "top-left-aligned",
91
+ "top-middle-aligned", "bottom-right-aligned",
92
+ "bottom-left-aligned", "bottom-middle-aligned"
93
+ ]; const randomPosition = positions[Math.floor(Math.random() * positions.length)];
94
+
95
+ // Add the button to the container
96
+ container.appendChild(button);
97
+
98
+ // Create a tour step for this button
99
+ tourElement.steps.push({
100
+ stepNo: stepNo,
101
+ element: elementId,
102
+ title: randomTitle,
103
+ content: randomContent,
104
+ position:'bottom-middle-aligned',
105
+ });
106
+ }
107
+
108
+
109
+
110
+ console.log(tourElement.steps);
111
+
112
+ // Start the tour when the page loads
113
+ window.onload = () => {
114
+
115
+ setTimeout(()=>{
116
+ tourElement.startTour();
117
+
118
+ },300);
119
+ };
120
+
121
+ </script>
108
122
  </body>
109
123
 
110
124
  </html>