From 51de3a3cdd22f862c63057b0bf7a924a5c296f93 Mon Sep 17 00:00:00 2001
From: Kamal Qureshi <kamalqureshi98@gmail.com>
Date: Wed, 25 Jun 2025 13:40:15 +0500
Subject: [PATCH] Initialize tags component

---
 .../src/comps/comps/tagsComp/tagsCompView.tsx | 92 +++++++++++++++++++
 .../src/comps/controls/optionsControl.tsx     | 32 +++++++
 client/packages/lowcoder/src/comps/index.tsx  | 14 +++
 .../lowcoder/src/comps/uiCompRegistry.ts      |  1 +
 .../packages/lowcoder/src/i18n/locales/en.ts  |  1 +
 .../src/pages/editor/editorConstants.tsx      |  1 +
 6 files changed, 141 insertions(+)
 create mode 100644 client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx

diff --git a/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx b/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx
new file mode 100644
index 0000000000..9979c5a1b5
--- /dev/null
+++ b/client/packages/lowcoder/src/comps/comps/tagsComp/tagsCompView.tsx
@@ -0,0 +1,92 @@
+import { AnimationStyle, BoolCodeControl, ButtonEventHandlerControl, CommonNameConfig, DropdownOptionControl, IconControl, LinkStyle, NameConfig, NameConfigDisabled, RefControl, Section, SelectOptionControl, StringControl, TabsOptionControl, TagsOptionControl, UICompBuilder, blurMethod, clickMethod, focusWithOptions, migrateOldData, refMethods, sectionNames, stringExposingStateControl, styleControl, withDefault, withExposingConfigs } from "@lowcoder-ee/index.sdk";
+import React from "react";
+import { trans } from "i18n";
+import { buttonRefMethods } from "../buttonComp/buttonCompConstants";
+import { Tag } from "antd";
+import { autoCompleteRefMethods } from "../autoCompleteComp/autoCompleteConstants";
+
+
+// const TagsCompView = (function () {
+//     // const childrenMap = {
+//     //     text: withDefault(StringControl, trans("link.link")),
+//     //     onEvent: ButtonEventHandlerControl,
+//     //     disabled: BoolCodeControl,
+//     //     loading: BoolCodeControl,
+        
+//     //     // style: migrateOldData(styleControl(LinkStyle, 'style')),
+//     //     animationStyle: styleControl(AnimationStyle, 'animationStyle'),
+//     //     prefixIcon: IconControl,
+//     //     suffixIcon: IconControl,
+//     //     viewRef: RefControl<HTMLElement>,
+//     //   };
+
+//     const childrenMap = {
+//         text: stringExposingStateControl("text", "world"),
+//         // options: TabsOptionControl,
+//     };
+//     return new UICompBuilder(childrenMap, (props) => {
+//         return (
+//             <Tag>Tag 1</Tag>
+//         )
+//     })
+//     .setPropertyViewFn((children) => {
+//         return(
+//             <Section name={sectionNames.basic}>
+//                 {/* {children.options.propertyView({})} */}
+//                 {children.text.propertyView({ label: trans("text") })}
+//             </Section>
+//         )
+//     })
+//     .build();
+// })();
+
+const multiTags = (function () {
+  const childrenMap = {
+    text: stringExposingStateControl("text", "world"),
+    options: TagsOptionControl,
+  };
+
+  return new UICompBuilder(childrenMap, (props) => {
+    const text = props.text.value;
+    console.log(props.options)
+    return (
+      <>
+        {props.options.map(tag => (
+          <Tag>{tag.label}</Tag>
+        ))}
+      </>
+      ); 
+  })
+    .setPropertyViewFn((children: any) => {
+      return (
+      <Section name="Basic">
+        {children.options.propertyView({})} 
+        {children.text.propertyView({ label: "Text" })}
+      </Section>
+      )
+    })
+    .build();
+})()
+
+
+// const childrenMap = {
+//   text: stringExposingStateControl("text", "world"),
+//   options: TagsOptionControl,
+// };
+  
+//   const TagsCompView = new UICompBuilder(childrenMap, (props: any) => {
+//     const text = props.text.value;
+//     return <div>Hello {text}</div>;
+//   })
+//     .setPropertyViewFn((children: any) => {
+//       return (
+//       <Section name="Basic">
+//         {children.options.propertyView({})} 
+//         {children.text.propertyView({ label: "Text" })}
+//       </Section>
+//       )
+//     })
+//     .build();
+
+export const MultiTagsComp = withExposingConfigs(multiTags, [new NameConfig("text", "")]);
+
diff --git a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
index 1d36ec52c5..55e6554c63 100644
--- a/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
+++ b/client/packages/lowcoder/src/comps/controls/optionsControl.tsx
@@ -557,6 +557,7 @@ const TabsOption = new MultiCompBuilder(
     </>
   ))
   .build();
+  
 
 export const TabsOptionControl = manualOptionsControl(TabsOption, {
   initOptions: [
@@ -567,6 +568,37 @@ export const TabsOptionControl = manualOptionsControl(TabsOption, {
   autoIncField: "id",
 });
 
+const TagsOption = new MultiCompBuilder(
+  {
+    id: valueComp<number>(-1),
+    label: StringControl,
+    icon: IconControl,
+    iconPosition: withDefault(LeftRightControl, "left"),
+    hidden: BoolCodeControl,
+  },
+  (props) => props
+)
+  .setPropertyViewFn((children) => (
+    <>
+      {children.label.propertyView({ label: trans("label") })}
+      {children.icon.propertyView({ label: trans("icon") })}
+      {children.iconPosition.propertyView({
+        label: trans("tabbedContainer.iconPosition"),
+        radioButton: true,
+      })}
+      {hiddenPropertyView(children)}
+    </>
+  ))
+  .build();
+
+export const TagsOptionControl = optionsControl(TagsOption, {
+  initOptions: [
+    { id: 0, label: "Option 1" },
+    { id: 1, label: "Option 2" },
+  ],
+  autoIncField: "id",
+});
+
 const StyledIcon = styled.span`
   margin: 0 4px 0 14px;
 `;
diff --git a/client/packages/lowcoder/src/comps/index.tsx b/client/packages/lowcoder/src/comps/index.tsx
index 2395f4f290..00d54a9b2a 100644
--- a/client/packages/lowcoder/src/comps/index.tsx
+++ b/client/packages/lowcoder/src/comps/index.tsx
@@ -193,6 +193,7 @@ import { DrawerComp } from "./hooks/drawerComp";
 import { ModalComp } from "./hooks/modalComp";
 import { defaultCollapsibleContainerData } from "./comps/containerComp/collapsibleContainerComp";
 import { ContainerComp as FloatTextContainerComp } from "./comps/containerComp/textContainerComp";
+import { MultiTagsComp } from "./comps/tagsComp/tagsCompView";
 
 type Registry = {
   [key in UICompType]?: UICompManifest;
@@ -709,6 +710,19 @@ export var uiCompMap: Registry = {
     },
     defaultDataFn: defaultGridData,
   },
+  multiTags: {
+    name: trans("tags"),
+    enName: "tags",
+    description: "Desc of Tags",
+    categories: ["layout"],
+    icon: FloatingButtonCompIcon,
+    keywords: trans("uiComp.floatButtonCompKeywords"),
+    comp: MultiTagsComp,
+    layoutInfo: {
+      w: 9,
+      h: 5,
+    },
+  },
   modal: {
     name: trans("uiComp.modalCompName"),
     enName: "Modal",
diff --git a/client/packages/lowcoder/src/comps/uiCompRegistry.ts b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
index 4c320de479..07f0e54b43 100644
--- a/client/packages/lowcoder/src/comps/uiCompRegistry.ts
+++ b/client/packages/lowcoder/src/comps/uiCompRegistry.ts
@@ -106,6 +106,7 @@ export type UICompType =
   | "container"
   | "pageLayout" // added by Falk Wolsky
   | "floatTextContainer"
+  | "multiTags" // Added by Kamal Qureshi
   | "tabbedContainer"
   | "modal"
   | "listView"
diff --git a/client/packages/lowcoder/src/i18n/locales/en.ts b/client/packages/lowcoder/src/i18n/locales/en.ts
index 44f5f4b1dd..31750f7897 100644
--- a/client/packages/lowcoder/src/i18n/locales/en.ts
+++ b/client/packages/lowcoder/src/i18n/locales/en.ts
@@ -45,6 +45,7 @@ export const en = {
   "accessControl": "Access Control",
   "copySuccess": "Copied Successfully",
   "copyError": "Copy Error",
+  "tags": "Tags",
   
   "api": {
     "publishSuccess": "Published Successfully",
diff --git a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
index a931455d4b..9087b1e7d2 100644
--- a/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
+++ b/client/packages/lowcoder/src/pages/editor/editorConstants.tsx
@@ -237,6 +237,7 @@ export const CompStateIcon: {
   step: <MemoizedIcon Icon={StepCompIconSmall} />,
   table: <MemoizedIcon Icon={TableCompIconSmall} />,
   text: <MemoizedIcon Icon={TextCompIconSmall} />,
+  multiTags: <MemoizedIcon Icon={TextCompIconSmall} />, 
   timeline: <MemoizedIcon Icon={TimeLineCompIconSmall} />,
   toggleButton: <MemoizedIcon Icon={ToggleButtonCompIconSmall} />,
   tour: <MemoizedIcon Icon={TourCompIconSmall} />,

<!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head>
<title>pFad - Phonifier reborn</title>
<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />
</head>
<body>
<h1>Pfad - The Proxy pFad of &#169; 2024 Garber Painting. All rights reserved.</h1>


<!-- Disclaimer -->
<p>Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.</p>
<br>
<p>Alternative Proxies:</p><p><a href="http://clevelandohioweatherforecast.com/php-proxy/index.php?q=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1818.patch" target="_blank">Alternative Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1818.patch" target="_blank">pFad Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v3index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1818.patch" target="_blank">pFad v3 Proxy</a></p><p><a href="http://clevelandohioweatherforecast.com/pFad/v4index.php?u=https://patch-diff.githubusercontent.com/raw/lowcoder-org/lowcoder/pull/1818.patch" target="_blank">pFad v4 Proxy</a></p></body>
</html>