-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.htm
More file actions
286 lines (266 loc) · 11.2 KB
/
index.htm
File metadata and controls
286 lines (266 loc) · 11.2 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Widget Functionality Demos</title>
<style>
body {
font-family: Arial, sans-serif;
line-height: 1.6;
color: #333;
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #f4f4f4;
}
h1 {
color: #2c3e50;
border-bottom: 2px solid #3498db;
padding-bottom: 10px;
}
h2 {
color: #2980b9;
}
h3 {
color: #34495e;
}
ul {
list-style-type: none;
padding-left: 0;
}
ul li {
margin-bottom: 10px;
padding-left: 20px;
position: relative;
}
ul li::before {
content: "•";
color: #3498db;
font-weight: bold;
position: absolute;
left: 0;
}
ol {
padding-left: 20px;
}
ol li {
margin-bottom: 10px;
}
.widget {
background-color: #fff;
border-radius: 5px;
padding: 20px;
margin-bottom: 20px;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.functionality {
background-color: #ecf0f1;
border-left: 4px solid #3498db;
padding: 10px;
margin-top: 10px;
}
a {
color: #3498db;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
.example {
font-family: monospace;
background-color: #f8f9fa;
padding: 10px;
border-radius: 4px;
margin-top: 10px;
}
.example table {
width: 100%;
border-collapse: collapse;
margin-top: 10px;
}
.example th, .example td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.example th {
background-color: #f2f2f2;
font-weight: bold;
}
.example tr:nth-child(even) {
background-color: #f9f9f9;
}
</style>
</head>
<body>
<h1>Vue 3 Widgets</h1>
<p>This is a description of a freelance job to create four Vue 3 widgets:</p>
<ul>
<li>FormText.vue</li>
<li>FormDrop.vue</li>
<li>PartyNameList.vue</li>
<li>PartyName.vue</li>
</ul>
The delivered widgets must not have any third party dependencies other than Vue 3 + Vite.
They must be self-contained widgets that can be used by other Vue 3 widgets in the normal way.<br>
I.e. Assume that there will be an App.vue file with the following code:
<pre><code class="language-vue">
<script>
import FormText from './FormText.vue'
import FormDrop from './FormDrop.vue'
import PartyNameList from './PartyNameList.vue'
import PartyName from './PartyName.vue'
export default {
components: {
FormText,
FormDrop,
PartyName,
PartyNameList
},
// other component logic
}
</script>
</code></pre>
<div class="widget">
<h2>FormText.vue</h2>
<p>For entering a short line of text with simple Regex validation.</p>
<h3>Props:</h3>
<ul>
<li><strong>Name:</strong> A string</li>
<li><strong>Regex:</strong> [Optional] a string with a regex pattern for validation purposes</li>
</ul>
<h3>Functionality:</h3>
<div class="functionality">
<ol>
<li>Formtext looks like normal text until hovered over.</li>
<li>On hover, show an outline of the text field that will appear when double clicked.</li>
<li>On double click, text converts to editable merge field.</li>
<li>On enter, or click elsewhere to lose focus, to go back to ordinary text view.</li>
</ol>
<p>If passed a Regex prop value, do some simple regex validation while editing the text field:</p>
<ol>
<li>Any characters that don't follow the Regex pattern will be red.</li>
<li>If there was only one valid character that the new character should have been, insert the correct character immediately before the invalid character.</li>
<li>If inserting the correct character makes the invalid character become valid, change its color from red to black.</li>
</ol>
</div>
<h3>Illustration of features:</h3>
<a href="/WidgetFunctionalityDemos/add-edit-delete/BCSOP-3.32.html">FormText widget and FormDrop widget. Add, Edit & Delete Party Names</a>
</div>
<div class="widget">
<h2>FormDrop.vue</h2>
<p>A widget for selecting an option from a dropdown menu.</p>
<h3>Props:</h3>
<ul>
<li><strong>Name:</strong> A string that is the name of the dropdown</li>
<li><strong>Default:</strong> A string</li>
<li><strong>Options:</strong> A list of available options</li>
<li><strong>AllowMultiple:</strong> "true" or "false"</li>
</ul>
<h3>Functionality:</h3>
<div class="functionality">
<ol>
<li>Widget will appear like normal text until hovered over.</li>
<li>On hover, show an outline of the dropdown menu button that will appear when double clicked.</li>
<li>When this widget is set to its default value, it will have faint yellow hi-liting indicating that user input is needed.</li>
<li>On double click, text converts to a drop down menu.</li>
<li>To select an option, hit Enter or click outside the drop down menu, to lose focus and revert to normal text appearance.</li>
<li>Typing letters will skip to the options starting with that letter, or combination of letters.</li>
<li>Normal text should be positioned to line up flush with text at top of the drop down menu when switching from drop down menu to plain text (i.e. via double clicking).</li>
</ol>
</div>
<h3>Illustration of features:</h3>
<a href="/WidgetFunctionalityDemos/add-edit-delete/BCSOP-3.32.html">FormText widget and FormDrop widget. Add, Edit & Delete Party Names</a>
</div>
<div class="widget">
<h2>PartyNameList.vue</h2>
<p>A Vue 3 widget that works with PartyName.vue widget, to manage a list of named parties of a given type.</p>
<h3>Props:</h3>
<ul>
<li><strong>Parties:</strong> A string listing Party Names separated by semi-colons</li>
<li><strong>Case:</strong> [Optional] "McCase, McCAPS, ALLCAPS"</li>
<li><strong>Type:</strong> A string of one or two English words</li>
<li><strong>OxfordComma:</strong> Boolean "true" or "false"</li>
</ul>
<h3>Functionality:</h3>
<div class="functionality">
<ul>
<li>Fills its container or table cell completely, without any padding or margin. Text inside this container can have padding, but when the container is given a yellow background, that background needs to fill the cell completely.</li>
<li>Contains a series of PartyName widgets. When initializing a new PartyNameList, create a series of PartyName widgets, corresponding to the names listed in the Parties prop.</li>
<li>Display the names of all PartyName widgets in the PartyNameList, using the case indicated by the Case Prop, and an oxford comma if OxfordComma == "true".</li>
<li>Case prop controls how to handle capitalization of certain surnames:</li>
</ul>
<div class="example">
Example: Parties = "Jane Mcdoe; John O'brien; John macnamara"
<table>
<tr>
<th>Case</th>
<th>OxfordComma</th>
<th>DISPLAYS AS</th>
</tr>
<tr>
<td>""</td>
<td>true</td>
<td>Jane Mcdoe, John O'brien, and John macnamara</td>
</tr>
<tr>
<td>""</td>
<td>false</td>
<td>Jane Mcdoe, John O'brien and John macnamara</td>
</tr>
<tr>
<td>"McCase"</td>
<td>true</td>
<td>Jane McDoe, John O'Brien, and John MacNamara</td>
</tr>
<tr>
<td>"McCAPS"</td>
<td>true</td>
<td>JANE McDOE, JOHN O'BRIEN, and JOHN MacNAMARA</td>
</tr>
<tr>
<td>"ALLCAPS"</td>
<td>false</td>
<td>JANE MCDOE, JOHN O'BRIEN AND JOHN MACNAMARA</td>
</tr>
</table>
</div>
<ul>
<li>PartyName widgets can be dragged and dropped to other PartyNameList widgets, removing the PartyName widget from one PartyNameList and adding it to the other PartyNameList.</li>
<li>PartyName widgets can be dragged and dropped within the current PartyNameList widgets, rearranging the PartyNames within the widget.</li>
<li>If PartyName list is empty it should display a faint yellow color as its background, indicating the need for user input of at least one party name.</li>
<li>On mouse hover, a button becomes visible to add a party of the same type to this list. If clicked, a new party is added and given a default name "Party Type #" followed by the number of parties currently in the PartyNameList.</li>
</ul>
</div>
</div>
<div class="widget">
<h2>PartyName.vue</h2>
<p>A widget that manages the name of a person who is party to a lawsuit. To be used in conjunction with the PartyNameList.vue widget.</p>
<h3>Props:</h3>
<ul>
<li><strong>Name:</strong> A string (the name of a person)</li>
</ul>
<h3>Functionality:</h3>
<div class="functionality">
<ul>
<li>Looks like normal text until hovered over.</li>
<li>On hover, show an outline of the text field that will appear when double clicked.</li>
<li>Double clicking on this button replaces the button with an editable text field, similar to FormText.vue.</li>
<li>Button can be re-ordered by dragging and dropping it into a PartyNameList widget.</li>
<li>Changing the name of the party to blank deletes this widget instance, removing it from PartyNameList if any.</li>
</ul>
</div>
</div>
<h1>Widget Functionality Demos</h1>
<p>Welcome to the Widget Functionality Demos.</p>
<ul>
<li>
<a href="/WidgetFunctionalityDemos/RearrangeDemo/BC-SOP-5.html">DEMO: Rearrange by drag and drop</a>
</li>
<li>
<a href="/WidgetFunctionalityDemos/addPartyType/2-01-new-party-type.html">DEMO: Add Party Type</a>
</li>
</ul>
</body>
</html>