pict-section-recordset 1.0.62 → 1.0.63

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 (8) hide show
  1. package/example_applications/index.html +41 -11
  2. package/example_applications/mocks/book-edit-view.html +137 -109
  3. package/example_applications/mocks/book-read-view.html +130 -103
  4. package/example_applications/mocks/list-view.html +170 -110
  5. package/example_applications/simple_entity/Simple-RecordSet-Application.js +78 -1
  6. package/example_applications/simple_entity/html/index.html +187 -7
  7. package/package.json +3 -3
  8. package/source/views/dashboard/RecordSet-Dashboard.js +100 -4
package/example_applications/mocks/list-view.html CHANGED
@@ -3,123 +3,183 @@
3
3
  <head>
4
4
  <meta charset="UTF-8">
5
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Example Pict-Section-Form List View </title>
6
+ <title>List View Mock - Pict Example</title>
7
+ <!-- Red Rock Mesa Theme — Pict Example App -->
8
+ <style>
9
+ *, *::before, *::after { box-sizing: border-box; }
10
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
11
+
12
+ /* --- Header Bar --- */
13
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
14
+ .pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
15
+ .pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
16
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
17
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
18
+
19
+ /* --- Content Area --- */
20
+ .pict-example-content { padding: 1.5rem; }
21
+
22
+ /* --- Page Header --- */
23
+ #RSP-Header-Container { margin-bottom: 1rem; }
24
+ #RSP-Header-Container h1 { color: #264653; font-size: 1.5rem; margin: 0 0 0.25rem; }
25
+ #RSP-Header-Container h2 { color: #D4A373; font-size: 1rem; font-weight: 400; margin: 0; }
26
+
27
+ /* --- Filter Section --- */
28
+ #RSP-Filter-Container { background: #fff; border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 6px; padding: 1.25rem; margin-bottom: 1rem; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
29
+ #RSP-Filter-Form { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }
30
+ #RSP-Filter-Form fieldset { border: none; padding: 0; margin: 0; flex: 1; min-width: 200px; }
31
+ #RSP-Filter-Form label { display: block; color: #264653; font-weight: 600; font-size: 0.85rem; margin-bottom: 0.3rem; }
32
+ #RSP-Filter-Form input[type="text"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem; color: #264653; width: 100%; }
33
+ #RSP-Filter-Form input[type="text"]:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
34
+ #RSP-Filter-Button-Container { display: flex; gap: 0.5rem; flex: none; }
35
+ #RSP-Filter-Button-Reset { background: #264653; color: #FAEDCD; border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
36
+ #RSP-Filter-Button-Reset:hover { background: #1A3340; }
37
+ #RSP-Filter-Button-Apply { background: #E76F51; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
38
+ #RSP-Filter-Button-Apply:hover { background: #C45A3E; }
39
+
40
+ /* --- Pagination --- */
41
+ #RSP-Upper-Pagination-Container, #RSP-Lower-Pagination-Container { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; margin-bottom: 0.5rem; }
42
+ #RSP-Upper-Pagination-Container p, #RSP-Lower-Pagination-Container p { margin: 0; font-size: 0.85rem; color: #264653; }
43
+ #RSP-Upper-Pagination-Container ul, #RSP-Lower-Pagination-Container ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
44
+ #RSP-Upper-Pagination-Container li a, #RSP-Lower-Pagination-Container li a { display: block; padding: 0.35rem 0.75rem; border: 1px solid #D4A373; border-radius: 4px; text-decoration: none; color: #264653; font-size: 0.8rem; font-weight: 500; }
45
+ #RSP-Upper-Pagination-Container li a:hover, #RSP-Lower-Pagination-Container li a:hover { background: #E76F51; color: #fff; border-color: #E76F51; }
46
+
47
+ /* --- List Table --- */
48
+ #RSP-List-Container { background: #fff; border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
49
+ #RSP-List-Table { width: 100%; border-collapse: collapse; }
50
+ #RSP-List-Table th { background: #264653; color: #FAEDCD; padding: 0.6rem 0.75rem; text-align: left; font-size: 0.8rem; font-weight: 600; }
51
+ #RSP-List-Table td { padding: 0.6rem 0.75rem; border-bottom: 1px solid #E8D9C0; font-size: 0.85rem; }
52
+ #RSP-List-Table tr:nth-child(even) td { background: #FFF9F0; }
53
+ #RSP-List-Table tr:hover td { background: #FFF0E0; }
54
+
55
+ /* --- Footer --- */
56
+ #RSP-Footer-Container { padding: 1rem 0 0; }
57
+ </style>
7
58
  </head>
8
59
  <body>
9
- <!-- START Header template -->
10
- <header id="RSP-Header-Container">
11
- <!-- START Header-Title template -->
12
- <h1>Title of Entity</h1>
13
- <!-- END Header-Title template -->
14
- <!-- START Header-Subtitle template -->
15
- <h2>Subtitle of Entity</h2>
16
- <!-- END Header-Subtitle template -->
17
- </header>
18
- <!-- END Header template -->
19
-
20
- <!-- START Filter template-->
21
- <section id="RSP-Filter-Container">
22
- <form id="RSP-Filter-Form">
23
- <!-- START Filter-Input-Container template -->
24
- <fieldset>
25
- <!-- START Filter-Input-Label template -->
26
- <label for="filter">Filter:</label>
27
- <!-- END Filter-Input-Label template -->
28
- <!-- START Filter-Input template -->
29
- <input type="text" id="filter" name="filter">
30
- <!-- END Filter-Input template -->
31
- </fieldset>
32
- <!-- END Filter-Input-Container template -->
33
- <!-- START Filter-Button-Container template -->
34
- <fieldset id="RSP-Filter-Button-Container">
35
- <!-- START Filter-Button-Reset template -->
36
- <button type="button" id="RSP-Filter-Button-Reset">Reset</button>
37
- <!-- END Filter-Button-Reset template -->
60
+ <div class="pict-example-header">
61
+ <div class="pict-example-badge">
62
+ <svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
63
+ Pict Example
64
+ </div>
65
+ <div class="pict-example-app-name">List View Mock</div>
66
+ <div class="pict-example-module">pict-section-recordset</div>
67
+ </div>
68
+ <div class="pict-example-content">
69
+ <!-- START Header template -->
70
+ <header id="RSP-Header-Container">
71
+ <!-- START Header-Title template -->
72
+ <h1>Title of Entity</h1>
73
+ <!-- END Header-Title template -->
74
+ <!-- START Header-Subtitle template -->
75
+ <h2>Subtitle of Entity</h2>
76
+ <!-- END Header-Subtitle template -->
77
+ </header>
78
+ <!-- END Header template -->
38
79
 
39
- <!-- START Filter-Button-Apply template -->
40
- <button type="submit" id="RSP-Filter-Button-Apply">Apply</button>
41
- <!-- END Filter-Button-Apply template -->
42
- </fieldset>
43
- <!-- END Filter-Button-Container template -->
44
- </form>
45
- </section>
46
- <!-- END Filter template-->
80
+ <!-- START Filter template-->
81
+ <section id="RSP-Filter-Container">
82
+ <form id="RSP-Filter-Form">
83
+ <!-- START Filter-Input-Container template -->
84
+ <fieldset>
85
+ <!-- START Filter-Input-Label template -->
86
+ <label for="filter">Filter:</label>
87
+ <!-- END Filter-Input-Label template -->
88
+ <!-- START Filter-Input template -->
89
+ <input type="text" id="filter" name="filter">
90
+ <!-- END Filter-Input template -->
91
+ </fieldset>
92
+ <!-- END Filter-Input-Container template -->
93
+ <!-- START Filter-Button-Container template -->
94
+ <fieldset id="RSP-Filter-Button-Container">
95
+ <!-- START Filter-Button-Reset template -->
96
+ <button type="button" id="RSP-Filter-Button-Reset">Reset</button>
97
+ <!-- END Filter-Button-Reset template -->
98
+ <!-- START Filter-Button-Apply template -->
99
+ <button type="submit" id="RSP-Filter-Button-Apply">Apply</button>
100
+ <!-- END Filter-Button-Apply template -->
101
+ </fieldset>
102
+ <!-- END Filter-Button-Container template -->
103
+ </form>
104
+ </section>
105
+ <!-- END Filter template-->
47
106
 
48
- <!-- START Upper Pagination template -->
49
- <nav id="RSP-Upper-Pagination-Container">
50
- <!-- START Upper Pagination-Description template -->
51
- <p>Showing 1-25 of 100</p>
52
- <!-- END Upper Pagination-Description template -->
53
- <!-- START Upper Pagination-Button-Container template -->
54
- <ul>
55
- <!-- START Upper Pagination Button Previous template -->
56
- <li><a href="#">&laquo; Previous</a></li>
57
- <!-- END Upper Pagination Button Previous template -->
58
- <!-- START Upper Pagination Button Page template -->
59
- <li><a href="#">1</a></li>
107
+ <!-- START Upper Pagination template -->
108
+ <nav id="RSP-Upper-Pagination-Container">
109
+ <!-- START Upper Pagination-Description template -->
110
+ <p>Showing 1-25 of 100</p>
111
+ <!-- END Upper Pagination-Description template -->
112
+ <!-- START Upper Pagination-Button-Container template -->
113
+ <ul>
114
+ <!-- START Upper Pagination Button Previous template -->
115
+ <li><a href="#">&laquo; Previous</a></li>
116
+ <!-- END Upper Pagination Button Previous template -->
117
+ <!-- START Upper Pagination Button Page template -->
118
+ <li><a href="#">1</a></li>
119
+ <!-- END Upper Pagination Button Page template -->
120
+ <!-- NOTE: more as needed (for examples)-->
121
+ <li><a href="#">2</a></li>
122
+ <li><a href="#">3</a></li>
123
+ <li><a href="#">4</a></li>
124
+ <!-- START Upper Pagination Button Next template -->
125
+ <li><a href="#">Next &raquo;</a></li>
126
+ <!-- END Upper Pagination Button Next template -->
127
+ <!-- START Upper Pagination Button Page template -->
128
+ </ul>
60
129
  <!-- END Upper Pagination Button Page template -->
61
- <!-- NOTE: more as needed (for examples)-->
62
- <li><a href="#">2</a></li>
63
- <li><a href="#">3</a></li>
64
- <li><a href="#">4</a></li>
65
- <!-- START Upper Pagination Button Next template -->
66
- <li><a href="#">Next &raquo;</a></li>
67
- <!-- END Upper Pagination Button Next template -->
68
- <!-- START Upper Pagination Button Page template -->
69
- </ul>
70
- <!-- END Upper Pagination Button Page template -->
71
- </nav>
72
- <!-- END Upper Pagination template -->
130
+ </nav>
131
+ <!-- END Upper Pagination template -->
73
132
 
74
- <!-- START List template -->
75
- <section id="RSP-List-Container">
76
- <!-- START List-Table template -->
77
- <table id="RSP-List-Table">
78
- <!-- START List-Table-Header template -->
79
- <thead>
80
- <tr>
81
- <!-- START List-Table-Header-Cell -->
82
- <th>Column 1</th>
83
- <!-- END List-Table-Header-Cell -->
84
- <!-- NOTE: more cells as needed -->
85
- <th>Column 2</th>
86
- <th>Column 3</th>
87
- </tr>
88
- </thead>
89
- <!-- END List-Table-Header template -->
90
- <!-- START List-Table-Body template -->
91
- <tbody>
92
- <!-- START List-Table-Body-Row -->
93
- <tr>
94
- <!-- START List-Table-Body-Cell -->
95
- <td>Row 1, Cell 1</td>
96
- <!-- END List-Table-Body-Cell -->
97
- <!-- NOTE: more cells as needed -->
98
- <td>Row 1, Cell 2</td>
99
- <td>Row 1, Cell 3</td>
100
- <!-- START List-Table-Body-Extra-Cell -->
101
- <td><!-- NOTE: slot for extra columns--></td>
102
- <!-- END List-Table-Body-Extra-Cell -->
103
- </tr>
104
- <!-- END List-Table-Body-Row -->
105
- <!-- Note: more rows as needed -->
106
- </tbody>
107
- <!-- END List-Table-Body template -->
108
- </table>
109
- <!-- END List-Table template -->
110
- </section>
111
- <!-- END List template -->
133
+ <!-- START List template -->
134
+ <section id="RSP-List-Container">
135
+ <!-- START List-Table template -->
136
+ <table id="RSP-List-Table">
137
+ <!-- START List-Table-Header template -->
138
+ <thead>
139
+ <tr>
140
+ <!-- START List-Table-Header-Cell -->
141
+ <th>Column 1</th>
142
+ <!-- END List-Table-Header-Cell -->
143
+ <!-- NOTE: more cells as needed -->
144
+ <th>Column 2</th>
145
+ <th>Column 3</th>
146
+ </tr>
147
+ </thead>
148
+ <!-- END List-Table-Header template -->
149
+ <!-- START List-Table-Body template -->
150
+ <tbody>
151
+ <!-- START List-Table-Body-Row -->
152
+ <tr>
153
+ <!-- START List-Table-Body-Cell -->
154
+ <td>Row 1, Cell 1</td>
155
+ <!-- END List-Table-Body-Cell -->
156
+ <!-- NOTE: more cells as needed -->
157
+ <td>Row 1, Cell 2</td>
158
+ <td>Row 1, Cell 3</td>
159
+ <!-- START List-Table-Body-Extra-Cell -->
160
+ <td><!-- NOTE: slot for extra columns--></td>
161
+ <!-- END List-Table-Body-Extra-Cell -->
162
+ </tr>
163
+ <!-- END List-Table-Body-Row -->
164
+ <!-- Note: more rows as needed -->
165
+ </tbody>
166
+ <!-- END List-Table-Body template -->
167
+ </table>
168
+ <!-- END List-Table template -->
169
+ </section>
170
+ <!-- END List template -->
112
171
 
113
- <!-- START Lower Pagination template -->
114
- <nav id="RSP-Lower-Pagination-Container">
115
- <!-- NOTE: Re-apply "RSP-Upper-Pagination-Container" content here to avoid duplication. -->
116
- </nav>
117
- <!-- END Lower Pagination template -->
172
+ <!-- START Lower Pagination template -->
173
+ <nav id="RSP-Lower-Pagination-Container">
174
+ <!-- NOTE: Re-apply "RSP-Upper-Pagination-Container" content here to avoid duplication. -->
175
+ </nav>
176
+ <!-- END Lower Pagination template -->
118
177
 
119
- <!-- Footer template -->
120
- <footer id="RSP-Footer-Container">
121
- <!-- NOTE: slot for additional set actions -->
122
- </footer>
123
- <!-- END Footer template -->
178
+ <!-- Footer template -->
179
+ <footer id="RSP-Footer-Container">
180
+ <!-- NOTE: slot for additional set actions -->
181
+ </footer>
182
+ <!-- END Footer template -->
183
+ </div>
124
184
  </body>
125
185
  </html>
package/example_applications/simple_entity/Simple-RecordSet-Application.js CHANGED
@@ -353,6 +353,82 @@ module.exports.default_configuration.pict_configuration = (
353
353
  }
354
354
  ]
355
355
  },
356
+ "BookFormDashboardExample":
357
+ {
358
+ "Form": "BookFormManifest",
359
+ "Scope": "BookFormDashboardExample",
360
+ "TitleTemplate": "Form Dashboard Example",
361
+ "WithRecordsetData": true,
362
+ "Descriptors":
363
+ {
364
+ "BookFormDashboard.TextExample": {
365
+ "Hash": "TextExample",
366
+ "Name": "Text Example",
367
+ "DataAddress": "BookFormDashboard.TextExample",
368
+ "DataType": "String",
369
+ "PictForm": {
370
+ "Section": "ExampleTextSection",
371
+ "Group": "ExampleTextGroup"
372
+ },
373
+ "Default": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
374
+ },
375
+ },
376
+ "Sections":
377
+ [
378
+ {
379
+ "Name": "ExampleTextSection",
380
+ "Hash": "ExampleTextSection",
381
+ "Solvers": [],
382
+ "ShowTitle": false,
383
+ "Groups": [
384
+ {
385
+ "Name": "ExampleTextGroup",
386
+ "Hash": "ExampleTextGroup",
387
+ "Rows": [],
388
+ "RecordSetSolvers": [],
389
+ "ShowTitle": false
390
+ }
391
+ ]
392
+ },
393
+ {
394
+ "Name": "ExampleSection",
395
+ "Hash": "ExampleSection",
396
+ "ShowTitle": false,
397
+ "Solvers": [],
398
+ "Groups": [
399
+ {
400
+ "Name": "ExampleGroup",
401
+ "Hash": "ExampleGroup",
402
+ "Rows": [],
403
+ "RecordSetSolvers": [],
404
+ "Layout": "Tabular",
405
+ "RecordSetAddress": "PSRS-Dashboard-Data",
406
+ "RecordManifest": "ExampleReferenceManifest"
407
+ }
408
+ ]
409
+ }
410
+ ],
411
+ "ReferenceManifests":
412
+ {
413
+ "ExampleReferenceManifest":
414
+ {
415
+ "Scope": "ExampleReferenceManifest",
416
+ "Descriptors":
417
+ {
418
+ "Authors.0.Name":
419
+ {
420
+ "Hash": "Author",
421
+ "Name": "Author",
422
+ "DataAddress": "Authors.0.Name",
423
+ "DataType": "String",
424
+ "IsTabular": true
425
+ },
426
+ },
427
+ "Sections": [],
428
+ "ReferenceManifests": {}
429
+ },
430
+ }
431
+ },
356
432
  "Bestsellers":
357
433
  {
358
434
  "Scope": "Bestsellers",
@@ -711,7 +787,7 @@ module.exports.default_configuration.pict_configuration = (
711
787
 
712
788
  "RecordSetDashboardManifestOnly": true,
713
789
 
714
- "RecordSetDashboardManifests": [ "Bestsellers", "Underdogs", "NewReleases" ],
790
+ "RecordSetDashboardManifests": [ "Bestsellers", "Underdogs", "NewReleases", "BookFormDashboardExample" ],
715
791
 
716
792
  "RecordDecorationConfiguration":
717
793
  [
@@ -772,6 +848,7 @@ module.exports.default_configuration.pict_configuration = (
772
848
  //TODO: something like this to reduce boilerplate
773
849
  "RecordSetFilterURLTemplate-Dashboard-Specific": "/PSRS/{~D:Record.RecordSet~}/SpecificDashboard/$$DASHBOARD_HASH$$/FilteredTo/{~D:Record.FilterString~}",
774
850
  "RecordSetFilterURLTemplate-Dashboard-Bestsellers": "/PSRS/{~D:Record.RecordSet~}/SpecificDashboard/Bestsellers/FilteredTo/{~D:Record.FilterString~}",
851
+ "RecordSetFilterURLTemplate-Dashboard-BookFormDashboardExample": "/PSRS/{~D:Record.RecordSet~}/SpecificDashboard/BookFormDashboardExample/FilteredTo/{~D:Record.FilterString~}",
775
852
  "RecordSetFilterURLTemplate-Dashboard-Underdogs": "/PSRS/{~D:Record.RecordSet~}/SpecificDashboard/Underdogs/FilteredTo/{~D:Record.FilterString~}",
776
853
  "RecordSetFilterURLTemplate-Dashboard-NewReleases": "/PSRS/{~D:Record.RecordSet~}/SpecificDashboard/NewReleases/FilteredTo/{~D:Record.FilterString~}",
777
854
 
package/example_applications/simple_entity/html/index.html CHANGED
@@ -1,27 +1,207 @@
1
1
  <!doctype html>
2
2
  <html lang="en">
3
3
  <head>
4
- <title>Simple.</title>
4
+ <meta charset="utf-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1">
6
+ <title>Simple Entity - Pict Example</title>
7
+ <!-- PICT Dynamic View CSS Container -->
5
8
  <style id="PICT-CSS"></style>
9
+ <!-- Red Rock Mesa Theme — Pict Example App -->
6
10
  <style>
7
- .is-hidden
8
- {
9
- display: none;
10
- }
11
+ *, *::before, *::after { box-sizing: border-box; }
12
+ body { margin: 0; padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; background: #FAEDCD; color: #264653; }
13
+
14
+ /* --- Header Bar --- */
15
+ .pict-example-header { display: flex; align-items: stretch; background: #264653; border-bottom: 3px solid #E76F51; }
16
+ .pict-example-badge { background: #E76F51; color: #fff; padding: 0.6rem 1rem; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; display: flex; align-items: center; gap: 0.5rem; }
17
+ .pict-example-badge svg { width: 14px; height: 14px; fill: #fff; flex-shrink: 0; }
18
+ .pict-example-app-name { padding: 0.6rem 1rem; color: #FAEDCD; font-size: 1.1rem; font-weight: 600; display: flex; align-items: center; }
19
+ .pict-example-module { margin-left: auto; padding: 0.6rem 1rem; color: #D4A373; font-size: 0.75rem; display: flex; align-items: center; letter-spacing: 0.03em; }
20
+
21
+ /* --- Navigation Bar --- */
22
+ .pict-example-nav { background: #2A3F4D; padding: 0 1rem; }
23
+ .pict-example-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0; }
24
+ .pict-example-nav li a { display: block; padding: 0.6rem 1rem; color: #FAEDCD; text-decoration: none; font-size: 0.85rem; font-weight: 500; border-bottom: 2px solid transparent; transition: border-color 0.15s, color 0.15s; }
25
+ .pict-example-nav li a:hover { color: #E76F51; border-bottom-color: #E76F51; }
26
+
27
+ /* --- Content Area --- */
28
+ .pict-example-content { padding: 1.5rem; }
29
+ #PRSP_Container { background: #fff; border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 6px; padding: 1.25rem; box-shadow: 0 2px 8px rgba(38,70,83,0.08); }
30
+
31
+ /* --- Form Element Styling --- */
32
+ #PRSP_Container input[type="text"],
33
+ #PRSP_Container input[type="number"],
34
+ #PRSP_Container input[type="email"],
35
+ #PRSP_Container input[type="date"],
36
+ #PRSP_Container textarea,
37
+ #PRSP_Container select { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.45rem 0.6rem; border-radius: 4px; font-size: 0.9rem; color: #264653; width: 100%; }
38
+ #PRSP_Container input:focus,
39
+ #PRSP_Container textarea:focus,
40
+ #PRSP_Container select:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
41
+ #PRSP_Container label { color: #264653; font-weight: 600; font-size: 0.85rem; }
42
+ #PRSP_Container h1, #PRSP_Container h2, #PRSP_Container h3, #PRSP_Container h4 { color: #264653; }
43
+ #PRSP_Container button,
44
+ #PRSP_Container input[type="button"],
45
+ #PRSP_Container input[type="submit"] { background: #E76F51; color: #fff; border: none; padding: 0.5rem 1.25rem; border-radius: 4px; font-size: 0.85rem; font-weight: 600; cursor: pointer; }
46
+ #PRSP_Container button:hover,
47
+ #PRSP_Container input[type="button"]:hover,
48
+ #PRSP_Container input[type="submit"]:hover { background: #C45A3E; }
49
+ #PRSP_Container table { width: 100%; border-collapse: collapse; }
50
+ #PRSP_Container th { background: #264653; color: #FAEDCD; padding: 0.5rem 0.75rem; text-align: left; font-size: 0.8rem; }
51
+ #PRSP_Container td { padding: 0.5rem 0.75rem; border-bottom: 1px solid #E8D9C0; font-size: 0.85rem; }
52
+ #PRSP_Container tr:nth-child(even) td { background: #FFF9F0; }
53
+
54
+ /* --- Title Section --- */
55
+ #PRSP_Title_Container { margin-bottom: 1rem; }
56
+ #PRSP_Title_Container h1 { margin: 0 0 0.15rem; font-size: 1.4rem; }
57
+ #PRSP_Title_Container h2 { margin: 0; font-size: 0.95rem; font-weight: 400; color: #D4A373; }
58
+
59
+ /* --- Filter Section --- */
60
+ #PRSP_Filters_Container { background: #FFF9F0; border: 1px solid #D4A373; border-radius: 6px; padding: 1rem 1.25rem; margin-bottom: 1rem; }
61
+ #PRSP_Filter_Form { display: flex; flex-direction: column; gap: 0.75rem; }
62
+ #PRSP_Filter_Form > fieldset { border: none; padding: 0; margin: 0; }
63
+
64
+ /* Search filter row */
65
+ #PRSP_Filter_Form > fieldset:first-child { display: flex; align-items: center; gap: 0.75rem; }
66
+ #PRSP_Filter_Form > fieldset:first-child label { flex-shrink: 0; font-weight: 600; font-size: 0.85rem; color: #264653; }
67
+ #PRSP_Filter_Form > fieldset:first-child input[type="text"] { flex: 1; }
68
+
69
+ /* Filter instances container */
70
+ #PRSP_Filter_Instances { display: flex; flex-direction: column; gap: 0.5rem; }
71
+ #PRSP_Filter_Instances > div { display: flex; align-items: center; gap: 0.5rem; background: #fff; border: 1px solid #E8D9C0; border-radius: 4px; padding: 0.5rem 0.75rem; flex-wrap: wrap; }
72
+
73
+ /* Remove (-) buttons in filter rows */
74
+ #PRSP_Filter_Instances > div > button[type="button"] { background: #B33030; color: #fff; border: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; font-size: 0.85rem; font-weight: 700; cursor: pointer; flex-shrink: 0; padding: 0; display: flex; align-items: center; justify-content: center; line-height: 1; }
75
+ #PRSP_Filter_Instances > div > button[type="button"]:hover { background: #8B2020; }
76
+
77
+ /* Filter labels (spans) */
78
+ #PRSP_Filter_Instances span { font-size: 0.85rem; font-weight: 600; color: #264653; white-space: nowrap; }
79
+
80
+ /* Date inputs in filters */
81
+ #PRSP_Filter_Instances input[type="datetime-local"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.85rem; color: #264653; }
82
+ #PRSP_Filter_Instances input[type="datetime-local"]:focus { outline: none; border-color: #E76F51; box-shadow: 0 0 0 2px rgba(231,111,81,0.15); }
83
+
84
+ /* Text inputs in filters */
85
+ #PRSP_Filter_Instances input[type="text"] { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.85rem; color: #264653; flex: 1; min-width: 120px; }
86
+
87
+ /* Tables inside filter instances (join selectors) */
88
+ #PRSP_Filter_Instances table { width: auto; border-collapse: collapse; flex: 1; }
89
+ #PRSP_Filter_Instances table td { border: none; padding: 0.25rem 0.35rem; background: transparent !important; vertical-align: top; }
90
+ #PRSP_Filter_Instances table tr:nth-child(even) td { background: transparent !important; }
91
+ #PRSP_Filter_Instances table th { background: #264653; color: #FAEDCD; padding: 0.25rem 0.5rem; font-size: 0.75rem; }
92
+ #PRSP_Filter_Instances table select { border: 1px solid #D4C4A8; background: #FFFCF7; padding: 0.35rem 0.5rem; border-radius: 4px; font-size: 0.85rem; color: #264653; min-width: 100px; max-height: 150px; }
93
+ #PRSP_Filter_Instances table input[type="text"] { min-width: 150px; }
94
+ #PRSP_Filter_Instances table label { font-size: 0.8rem; font-weight: 600; color: #264653; white-space: nowrap; }
95
+ #PRSP_Filter_Instances table button[type="submit"],
96
+ #PRSP_Filter_Instances table button[type="button"] { background: #264653; color: #FAEDCD; border: none; padding: 0.35rem 0.75rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; cursor: pointer; }
97
+ #PRSP_Filter_Instances table button[type="submit"]:hover,
98
+ #PRSP_Filter_Instances table button[type="button"]:hover { background: #1A3340; }
99
+
100
+ /* Constrain large multi-select boxes in join filters */
101
+ #PRSP_Filter_Instances > div > table > tbody > tr > td > select[size] { max-height: 120px; overflow-y: auto; }
102
+ /* Direct selects in filter containers */
103
+ #PRSP_Filter_Instances select[size] { max-height: 120px; overflow-y: auto; }
104
+
105
+ /* Hidden inputs in filters shouldn't take space */
106
+ #PRSP_Filter_Instances input[type="hidden"] { display: none; }
107
+
108
+ /* Action button fieldsets (Clear/Reset/Apply, +, Manage) */
109
+ #PRSP_Filter_Form > fieldset:nth-child(n+3) { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.35rem; }
110
+ /* First action row gets a separator line */
111
+ #PRSP_Filter_Form > fieldset:nth-child(3) { border-top: 1px solid #E8D9C0; margin-top: 0.25rem; padding-top: 0.6rem; }
112
+ #PRSP_Filter_Button_Clear { background: #264653 !important; color: #FAEDCD !important; }
113
+ #PRSP_Filter_Button_Clear:hover { background: #1A3340 !important; }
114
+ #PRSP_Filter_Button_Reset { background: #D4A373 !important; color: #fff !important; }
115
+ #PRSP_Filter_Button_Reset:hover { background: #B88A5C !important; }
116
+ #PRSP_Filter_Button_Apply { background: #E76F51 !important; color: #fff !important; }
117
+ #PRSP_Filter_Button_Apply:hover { background: #C45A3E !important; }
118
+ #PRSP_Filter_Button_Add { background: #264653 !important; color: #FAEDCD !important; width: 2rem; height: 2rem; border-radius: 50% !important; font-size: 1rem; font-weight: 700; display: flex !important; align-items: center; justify-content: center; padding: 0 !important; }
119
+ #PRSP_Filter_Button_Add:hover { background: #1A3340 !important; }
120
+ #PRSP_Filter_Button_Manage { background: #264653 !important; color: #FAEDCD !important; }
121
+ #PRSP_Filter_Button_Manage:hover { background: #1A3340 !important; }
122
+
123
+ /* Dropdowns / popovers inside filters */
124
+ #PRSP-SUBSET-Filters-Template-Add-Filter-Container { background: #fff; border: 1px solid #D4A373; border-radius: 4px; padding: 0.5rem; margin-top: 0.25rem; box-shadow: 0 2px 8px rgba(38,70,83,0.12); }
125
+ #FilterPersistenceView-Container { background: #fff; border: 1px solid #D4A373; border-radius: 4px; padding: 0.5rem; margin-top: 0.25rem; box-shadow: 0 2px 8px rgba(38,70,83,0.12); }
126
+
127
+ /* --- Pagination --- */
128
+ #RSP_Upper_Pagination_Container,
129
+ #RSP_Lower_Pagination_Container { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0; margin-bottom: 0.25rem; font-size: 0.85rem; color: #264653; }
130
+ #RSP_Upper_Pagination_Container div,
131
+ #RSP_Lower_Pagination_Container div { display: flex; align-items: center; gap: 0.35rem; }
132
+ #RSP_Upper_Pagination_Container div span,
133
+ #RSP_Lower_Pagination_Container div span { font-size: 0.85rem; }
134
+ #RSP_Upper_Pagination_Container ul,
135
+ #RSP_Lower_Pagination_Container ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 0.25rem; }
136
+ #RSP_Upper_Pagination_Container ul li a,
137
+ #RSP_Lower_Pagination_Container ul li a { display: block; padding: 0.35rem 0.75rem; border: 1px solid #D4A373; border-radius: 4px; text-decoration: none; color: #264653; font-size: 0.8rem; font-weight: 500; transition: background 0.15s, color 0.15s; }
138
+ #RSP_Upper_Pagination_Container ul li a:hover,
139
+ #RSP_Lower_Pagination_Container ul li a:hover { background: #E76F51; color: #fff; border-color: #E76F51; }
140
+
141
+ /* --- Page Number Links --- */
142
+ #PRSP_List_Container > div { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 0.5rem; }
143
+ a[class^="page-offset"] { display: inline-block; padding: 0.3rem 0.6rem; border: 1px solid #D4A373; border-radius: 4px; text-decoration: none; color: #264653; font-size: 0.8rem; font-weight: 500; transition: background 0.15s, color 0.15s; background: #fff; }
144
+ a[class^="page-offset"]:hover { background: #E76F51; color: #fff; border-color: #E76F51; }
145
+
146
+ /* --- List Table Refinements --- */
147
+ #PRSP_List_Table { width: 100%; border-collapse: collapse; }
148
+ #PRSP_List_Table th { background: #264653 !important; color: #FAEDCD !important; padding: 0.6rem 0.75rem !important; border-bottom: none !important; text-align: left; font-size: 0.8rem; font-weight: 600; white-space: nowrap; }
149
+ #PRSP_List_Table td { padding: 0.6rem 0.75rem !important; border-bottom: 1px solid #E8D9C0 !important; font-size: 0.85rem; background: #fff; vertical-align: middle; }
150
+ #PRSP_List_Table tr:nth-child(even) td { background: #FFF9F0; }
151
+ #PRSP_List_Table tr:hover td { background: #FFF0E0; }
152
+ #PRSP_List_Table img { max-width: 80px; max-height: 100px; border-radius: 3px; border: 1px solid #E8D9C0; }
153
+ #PRSP_List_Table a { color: #E76F51; font-weight: 600; text-decoration: none; }
154
+ #PRSP_List_Table a:hover { color: #C45A3E; text-decoration: underline; }
155
+
156
+ /* List container wrapper (contains title, filters, pagination, AND table) */
157
+ #PRSP_List_Container { margin-bottom: 0.5rem; }
158
+
159
+ /* The actual list table wrapper */
160
+ #PRSP_List_Container > section { border: 1px solid #D4A373; border-top: 4px solid #E76F51; border-radius: 6px; overflow: hidden; box-shadow: 0 2px 8px rgba(38,70,83,0.08); margin-bottom: 0.5rem; }
161
+
162
+ /* --- Record View Tabs --- */
163
+ #PRSP-Read-Tabs-Container { margin-top: 0.5rem; }
164
+ #PRSP-Read-Tab-Nav { display: flex; gap: 0; border-bottom: 2px solid #D4A373; margin-bottom: 0; }
165
+ .psrs-tab { padding: 0.55rem 1.25rem; font-size: 0.9rem; font-weight: 500; color: #264653; cursor: pointer; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; margin-bottom: -2px; transition: background 0.15s, color 0.15s; }
166
+ .psrs-tab:hover { background: #FFF9F0; }
167
+ .psrs-tab.is-active { background: #264653; color: #FAEDCD; border-color: #264653; }
168
+ .psrs-tab-body { display: none; padding: 1rem 0 0; }
169
+ .psrs-tab-body.is-active { display: block; }
170
+
171
+ /* --- Record View Content --- */
172
+ #PRSP_Container h2 { font-size: 1.1rem; margin: 0.75rem 0 0.5rem; color: #264653; }
173
+ #PRSP_Container h3 { font-size: 0.95rem; margin: 0.5rem 0 0.35rem; color: #D4A373; }
174
+
175
+ /* --- Utility --- */
176
+ .is-hidden { display: none; }
11
177
  </style>
12
178
  <script src="./pict.js" type="text/javascript"></script>
13
179
  <script type="text/javascript">Pict.safeOnDocumentReady(() => { Pict.safeLoadPictApplication(SimpleApplication, 1)});</script>
14
180
  </head>
15
181
  <body>
16
- <nav>
182
+ <div class="pict-example-header">
183
+ <div class="pict-example-badge">
184
+ <svg viewBox="0 0 16 16"><polygon points="8,1 10,6 16,6 11,9.5 13,15 8,11.5 3,15 5,9.5 0,6 6,6"/></svg>
185
+ Pict Example
186
+ </div>
187
+ <div class="pict-example-app-name">Simple Entity</div>
188
+ <div class="pict-example-module">pict-section-recordset</div>
189
+ </div>
190
+ <nav class="pict-example-nav">
17
191
  <ul>
18
192
  <li><a href="#/PSRS/Book/List">Book List</a></li>
19
193
  <li><a href="#/PSRS/Author/List">Author List</a></li>
20
194
  <li><a href="#/PSRS/Book/Create">Book Create</a></li>
21
195
  <li><a href="#/PSRS/Author/Create">Author Create</a></li>
196
+ <li><a href="#/PSRS/BookstoreInventory/Dashboard">Bestsellers</a></li>
197
+ <li><a href="#/PSRS/BookstoreInventory/SpecificDashboard/Underdogs">Underdogs</a></li>
198
+ <li><a href="#/PSRS/BookstoreInventory/SpecificDashboard/NewReleases">New Releases</a></li>
199
+ <li><a href="#/PSRS/BookstoreInventory/SpecificDashboard/BookFormDashboardExample">Form Dashboard Example</a></li>
22
200
  </ul>
23
201
  </nav>
24
- <div id="PRSP_Container"></div>
202
+ <div class="pict-example-content">
203
+ <div id="PRSP_Container"></div>
204
+ </div>
25
205
  <script src="./simple_application.js" type="text/javascript"></script>
26
206
  </body>
27
207
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pict-section-recordset",
3
- "version": "1.0.62",
3
+ "version": "1.0.63",
4
4
  "description": "Pict dynamic record set management views",
5
5
  "main": "source/Pict-Section-RecordSet.js",
6
6
  "directories": {
@@ -33,7 +33,7 @@
33
33
  "browser-env": "^3.3.0",
34
34
  "eslint": "^9.28.0",
35
35
  "jquery": "^3.7.1",
36
- "pict": "^1.0.348",
36
+ "pict": "^1.0.350",
37
37
  "pict-application": "^1.0.32",
38
38
  "pict-service-commandlineutility": "^1.0.18",
39
39
  "quackage": "^1.0.51",
@@ -43,7 +43,7 @@
43
43
  "fable-serviceproviderbase": "^3.0.18",
44
44
  "pict-provider": "^1.0.10",
45
45
  "pict-router": "^1.0.4",
46
- "pict-section-form": "^1.0.187",
46
+ "pict-section-form": "^1.0.189",
47
47
  "pict-template": "^1.0.14",
48
48
  "pict-view": "^1.0.66",
49
49
  "sinon": "^21.0.1"