-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathcsvtextarea_llm_generated_specification.html
200 lines (200 loc) · 11.2 KB
/
csvtextarea_llm_generated_specification.html
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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>CL-web-components</title>
<link rel="stylesheet" href="/css/site.css">
</head>
<body>
<nav>
<ul>
<li><a href="/">Home</a></li>
<li><a href="index.html">README</a></li>
<li><a href="LICENSE">LICENSE</a></li>
<li><a href="user_manual.html">User Manual</a></li>
<li><a href="INSTALL.html">INSTALL</a></li>
<li><a href="about.html">About</a></li>
<li><a href="search.html">Search</a></li>
<li><a href="https://github.com/caltechlibrary/CL-web-components">GitHub</a></li>
</ul>
</nav>
<section>
<h1 id="csvtextarea-web-component-specification">CSVTextarea Web
Component Specification</h1>
<h2 id="overview">Overview</h2>
<p>The <code>CSVTextarea</code> web component is designed to manage and
display tabular data in an editable HTML table format. It supports CSV
data input and output, autocomplete functionality, and various
customization options. The component is built using the Web Components
API and leverages Shadow DOM for encapsulation.</p>
<h2 id="dependencies">Dependencies</h2>
<ul>
<li><strong><code>parseCSV</code>, <code>parseCSVRow</code>,
<code>stringifyCSV</code></strong>: Functions imported from
<code>./parseCSV.js</code> for parsing and stringifying CSV data. These
functions are assumed to be available and correctly implemented.</li>
</ul>
<h2 id="html-structure">HTML Structure</h2>
<ul>
<li><strong>Shadow DOM</strong>: The component uses Shadow DOM to
encapsulate its styles and structure.</li>
<li><strong>Template</strong>: The component’s template includes a table
with a <code>thead</code> and <code>tbody</code>, and buttons for
appending rows and cleaning up the table.</li>
</ul>
<h2 id="attributes">Attributes</h2>
<ul>
<li><strong><code>column-headings</code></strong> (required): A
comma-delimited list of column headings. This attribute is parsed to
create the table headers.</li>
<li><strong><code>id</code></strong>: Sets the ID of the component.</li>
<li><strong><code>class</code></strong>: Sets the class of the
component.</li>
<li><strong><code>caption</code></strong>: Sets the caption of the
table.</li>
<li><strong><code>text</code></strong>: Sets the text content of the
component.</li>
<li><strong><code>placeholder</code></strong>: Sets the placeholder text
for input fields in the table.</li>
<li><strong><code>css-href</code></strong>: A URL to custom CSS that
replaces the default CSS provided by the HTML template.</li>
<li><strong><code>debug</code></strong>: A boolean attribute that, when
true, enables debug logging to the console.</li>
</ul>
<h2 id="methods">Methods</h2>
<ol type="1">
<li><strong>Lifecycle Methods</strong>
<ul>
<li><strong><code>constructor()</code></strong>: Initializes the
component and attaches a Shadow DOM.</li>
<li><strong><code>connectedCallback()</code></strong>: Called when the
component is added to the DOM. Initializes the component and sets up
event listeners.</li>
<li><strong><code>attributeChangedCallback(name, old, newVal)</code></strong>:
Called when an observed attribute is added, removed, or changed.</li>
</ul></li>
<li><strong>Initialization Methods</strong>
<ul>
<li><strong><code>initializeComponent()</code></strong>: Sets up the
component’s template and styles. Returns a promise that resolves when
the component is fully initialized.</li>
<li><strong><code>initializeTable()</code></strong>: Initializes the
table structure based on the <code>column-headings</code> attribute and
populates the table body.</li>
</ul></li>
<li><strong>Event Handling</strong>
<ul>
<li><strong><code>setupEventListeners()</code></strong>: Sets up event
listeners for the component’s buttons and table cells.</li>
</ul></li>
<li><strong>Table Management</strong>
<ul>
<li><strong><code>rowCount()</code></strong>: Returns the number of rows
in the table body.</li>
<li><strong><code>columnCount()</code></strong>: Returns the number of
columns in the table headings.</li>
<li><strong><code>isEmptyRow(rowIndex)</code></strong>: Checks if a row
is empty.</li>
<li><strong><code>appendRow()</code></strong>: Adds an empty row to the
table body.</li>
<li><strong><code>cleanupTable()</code></strong>: Removes empty rows
from the table body.</li>
</ul></li>
<li><strong>Data Conversion</strong>
<ul>
<li><strong><code>toCSV()</code></strong>: Converts the table body to a
CSV string.</li>
<li><strong><code>fromCSV(csvText)</code></strong>: Populates the table
body from a CSV string.</li>
<li><strong><code>toObjects()</code></strong>: Converts the table body
to an array of objects representing each cell.</li>
<li><strong><code>fromObjects(objects)</code></strong>: Populates the
table body from an array of objects.</li>
<li><strong><code>toJSON()</code></strong>: Converts the table body to a
JSON string.</li>
<li><strong><code>fromJSON(jsonString)</code></strong>: Populates the
table body from a JSON string.</li>
</ul></li>
<li><strong>Textarea Integration</strong>
<ul>
<li><strong><code>fromTextarea()</code></strong>: Reads CSV data from an
inner <code><textarea></code> and populates the table body.</li>
<li><strong><code>toTextarea()</code></strong>: Writes the table body’s
CSV data to an inner <code><textarea></code>.</li>
</ul></li>
<li><strong>Cell Management</strong>
<ul>
<li><strong><code>getCellValue(rowIndex, colIndexOrName)</code></strong>:
Gets the value of a cell.</li>
<li><strong><code>setCellValue(rowIndex, colIndexOrName, value)</code></strong>:
Sets the value of a cell.</li>
</ul></li>
<li><strong>Autocomplete Functionality</strong>
<ul>
<li><strong><code>setAutocomplete(colIndexOrName, options)</code></strong>:
Associates a datalist with a column’s input elements.</li>
<li><strong><code>getAutocomplete(colIndexOrName)</code></strong>:
Returns the options associated with a column’s datalist.</li>
</ul></li>
<li><strong>Utility Methods</strong>
<ul>
<li><strong><code>getColumnIndexByName(colName)</code></strong>: Gets
the index of a column by its name.</li>
</ul></li>
</ol>
<h2 id="events">Events</h2>
<ul>
<li><strong><code>changed</code></strong>: Emitted when the value of a
cell changes. Contains the row index, column index, and new value.</li>
<li><strong><code>focused</code></strong>: Emitted when a cell gains
focus. Contains the row index, column index, and value.</li>
</ul>
<h2 id="accessibility">Accessibility</h2>
<ul>
<li>The component follows W3C accessibility guidelines by providing
keyboard navigation and focus management.</li>
<li>Includes a clickable help icon (ⓘ) that displays help text if the
<code>title</code> or <code>help-description</code> attributes are
present.</li>
</ul>
<h2 id="customization">Customization</h2>
<ul>
<li>Supports custom CSS via the <code>css-href</code> attribute.</li>
<li>Allows customization of table captions, placeholder text, and debug
logging.</li>
</ul>
<h2 id="usage-example">Usage Example</h2>
<div class="sourceCode" id="cb1"><pre
class="sourceCode html"><code class="sourceCode html"><span id="cb1-1"><a href="#cb1-1" aria-hidden="true" tabindex="-1"></a><span class="dt"><</span><span class="kw">csv-textarea</span><span class="ot"> id</span><span class="op">=</span><span class="st">"my-csv"</span><span class="ot"> column-headings</span><span class="op">=</span><span class="st">"Name,Age,City"</span><span class="ot"> class</span><span class="op">=</span><span class="st">"csv-component"</span><span class="ot"> title</span><span class="op">=</span><span class="st">"CSV Editor"</span><span class="ot"> placeholder</span><span class="op">=</span><span class="st">"Enter CSV data"</span><span class="ot"> caption</span><span class="op">=</span><span class="st">"CSV Table"</span><span class="ot"> debug</span><span class="dt">></span></span>
<span id="cb1-2"><a href="#cb1-2" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">datalist</span><span class="ot"> id</span><span class="op">=</span><span class="st">"city"</span><span class="dt">></span></span>
<span id="cb1-3"><a href="#cb1-3" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Azusa"</span><span class="dt">></span></span>
<span id="cb1-4"><a href="#cb1-4" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Cocomo"</span><span class="dt">></span></span>
<span id="cb1-5"><a href="#cb1-5" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Malibu"</span><span class="dt">></span></span>
<span id="cb1-6"><a href="#cb1-6" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Topanga"</span><span class="dt">></span></span>
<span id="cb1-7"><a href="#cb1-7" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Rancho Cucamonga"</span><span class="dt">></span></span>
<span id="cb1-8"><a href="#cb1-8" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">option</span><span class="ot"> value</span><span class="op">=</span><span class="st">"Zuma"</span><span class="dt">></span></span>
<span id="cb1-9"><a href="#cb1-9" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">datalist</span><span class="dt">></span></span>
<span id="cb1-10"><a href="#cb1-10" aria-hidden="true" tabindex="-1"></a> <span class="dt"><</span><span class="kw">textarea</span><span class="dt">></span></span>
<span id="cb1-11"><a href="#cb1-11" aria-hidden="true" tabindex="-1"></a> "Doe, Jane", 20, Rancho Cucamonga</span>
<span id="cb1-12"><a href="#cb1-12" aria-hidden="true" tabindex="-1"></a> "Doe, John", 25, Cocomo</span>
<span id="cb1-13"><a href="#cb1-13" aria-hidden="true" tabindex="-1"></a> <span class="dt"></</span><span class="kw">textarea</span><span class="dt">></span></span>
<span id="cb1-14"><a href="#cb1-14" aria-hidden="true" tabindex="-1"></a><span class="dt"></</span><span class="kw">csv-textarea</span><span class="dt">></span></span></code></pre></div>
<h2 id="detailed-behavior">Detailed Behavior</h2>
<ul>
<li><strong>Initialization</strong>: The component initializes its
template and sets up the table structure based on the
<code>column-headings</code> attribute.</li>
<li><strong>Event Handling</strong>: It listens for changes and focus
events on table cells, emitting custom events for external
handling.</li>
<li><strong>Data Management</strong>: Methods for converting between
CSV, JSON, and table data, as well as appending and cleaning up
rows.</li>
<li><strong>Autocomplete</strong>: Correctly associates datalists with
input fields and ensures options are set up properly.</li>
<li><strong>Debug Mode</strong>: When the <code>debug</code> attribute
is set, the component logs events and table contents to the
console.</li>
</ul>
</section>
</body>
</html>