Merge pull request #1017 from Tradeshift/paya-1423

feat(tags): Add properties to tags so it can render in tables
Tradeshift · Nov 8, 2021 · a9512d4 · a9512d4
2 parents 36be8dd + 2669d79
commit a9512d4
Show file tree

Hide file tree

Showing 2 changed files with 72 additions and 3 deletions.
diff --git a/docs/src/xhtml/components/table/extras.xhtml b/docs/src/xhtml/components/table/extras.xhtml
@@ -44,6 +44,13 @@
 					src: src
 				};
 			}
+			function gettag(data, type) {
+				return {
+					item: 'Tag',
+					data,
+					type
+				};
+			}
 		</script>
 	</head>
 	<body class="nosticky">
@@ -63,6 +70,7 @@
 					<li><a href="#image">Image</a></li>
 					<li><a href="#switch">Switch</a></li>
 					<li><a href="#userimage">UserImage</a></li>
+					<li><a href="#tag">Tag</a></li>
 				</ul>
 			</section>
 
@@ -479,6 +487,66 @@
 					</script>
 				</div>
 			</section>
+
+			<section id="tag">
+				<h3>Tag</h3>
+				<p>
+					This function returns the JSON to generate a Tag
+				</p>
+				<figure data-ts="DoxScript">
+					<script type="text/plain">
+						function getTag(data, type) {
+							return {
+								item: 'Tag',
+								data,
+								type
+							};
+						}
+					</script>
+				</figure>
+				<ul class="splitscreen">
+					<li>
+						<figure data-ts="DoxScript">
+							<script type="runnable">
+								ts.ui.get('#table6', table => {
+									table.cols(['One', 'Two']);
+									table.rows([
+										['A', gettag('Active', 'ts-success')]
+									]);
+								});
+							</script>
+						</figure>
+					</li>
+					<li>
+						<div data-ts="Table" id="table6"></div>
+					</li>
+				</ul>
+				<p>Here are the properties of the Tag.</p>
+				<div data-ts="DoxApi">
+					<script type="application/json">
+						{
+							"name": "ts.ui.TagModel",
+							"properties": [
+								{
+									"name": "id",
+									"type": "string",
+									"desc": "Id"
+								},
+								{
+									"name": "data",
+									"type": "string",
+									"desc": "Value of the tag"
+								},
+								{
+									"name": "type",
+									"type": "string",
+									"desc": "The CSS classname."
+								}
+							]
+						}
+					</script>
+				</div>
+			</section>
 		</article>
 	</body>
 </html>
diff --git a/src/runtime/edbml/functions/ts.ui.tag.edbml b/src/runtime/edbml/functions/ts.ui.tag.edbml
@@ -1,7 +1,8 @@
 <!DOCTYPE edbml>
 <script>
 	<?param name="tag" type="ts.ui.TagModel"?>
-	@id = 'tag' + tag.$instanceid;
-
-	<figure data-ts="Tag" @id></figure>
+	@id = tag.id || 'tag' + tag.$instanceid;
+	$att['data-ts.type'] = tag.type || null;
+	$att['data-ts.data'] = tag.data || null;
+	<figure data-ts="Tag" @data-ts.type @data-ts.data @id></figure>
 </script>