Merge pull request #1749 from iamfaran/feat/1578-tags

[Feat]: #1578 Add Tags Presets and custom margin paddings borders

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/tableComp/column/columnTypeComps/columnTagsComp.tsx

@@ -58,10 +58,58 @@ const TagsControl = codeControl<Array<string> | string>(
 
 function getTagColor(tagText : any, tagOptions: any[]) {
   const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
-  return foundOption ? foundOption.color : (function() {
-    const index = Math.abs(hashToNum(tagText)) % colors.length;
-    return colors[index];
-  })();
+  if (foundOption) {
+    if (foundOption.colorType === "preset") {
+      return foundOption.presetColor;
+    } else if (foundOption.colorType === "custom") {
+      return undefined; // For custom colors, we'll use style instead
+    }
+    // Backward compatibility - if no colorType specified, assume it's the old color field
+    return foundOption.color;
+  }
+  // Default fallback
+  const index = Math.abs(hashToNum(tagText)) % colors.length;
+  return colors[index];
+}
+
+function getTagStyle(tagText: any, tagOptions: any[]) {
+  const foundOption = tagOptions.find((option: { label: any; }) => option.label === tagText);
+  if (foundOption) {
+    const style: any = {};
+    
+    // Handle color styling
+    if (foundOption.colorType === "custom") {
+      style.backgroundColor = foundOption.color;
+      style.color = foundOption.textColor;
+      style.border = `1px solid ${foundOption.color}`;
+    }
+    
+    // Add border styling if specified
+    if (foundOption.border) {
+      style.borderColor = foundOption.border;
+      if (!foundOption.colorType || foundOption.colorType !== "custom") {
+        style.border = `1px solid ${foundOption.border}`;
+      }
+    }
+    
+    // Add border radius if specified
+    if (foundOption.radius) {
+      style.borderRadius = foundOption.radius;
+    }
+    
+    // Add margin if specified
+    if (foundOption.margin) {
+      style.margin = foundOption.margin;
+    }
+    
+    // Add padding if specified
+    if (foundOption.padding) {
+      style.padding = foundOption.padding;
+    }
+    
+    return style;
+  }
+  return {};
 }
 
 function getTagIcon(tagText: any, tagOptions: any[]) {
@@ -286,13 +334,32 @@ const TagEdit = React.memo((props: TagEditPropsType) => {
         {tags.map((value, index) => (
           <CustomSelect.Option value={value} key={index}>
             {value.split(",")[1] ? (
-              value.split(",").map((item, i) => (
-                <Tag color={getTagColor(item, memoizedTagOptions)} icon={getTagIcon(item, memoizedTagOptions)} key={i} style={{ marginRight: "8px" }}>
-                  {item}
-                </Tag>
-              ))
+              value.split(",").map((item, i) => {
+                const tagColor = getTagColor(item, memoizedTagOptions);
+                const tagIcon = getTagIcon(item, memoizedTagOptions);
+                const tagStyle = getTagStyle(item, memoizedTagOptions);
+                
+                return (
+                  <Tag 
+                    color={tagColor}
+                    icon={tagIcon} 
+                    key={i} 
+                    style={{ 
+                      marginRight: tagStyle.margin ? undefined : "8px", 
+                      ...tagStyle 
+                    }}
+                  >
+                    {item}
+                  </Tag>
+                );
+              })
             ) : (
-              <Tag color={getTagColor(value, memoizedTagOptions)} icon={getTagIcon(value, memoizedTagOptions)} key={index}>
+              <Tag 
+                color={getTagColor(value, memoizedTagOptions)} 
+                icon={getTagIcon(value, memoizedTagOptions)} 
+                key={index}
+                style={getTagStyle(value, memoizedTagOptions)}
+              >
                 {value}
               </Tag>
             )}
@@ -316,9 +383,18 @@ export const ColumnTagsComp = (function () {
       const view = tags.map((tag, index) => {
         // The actual eval value is of type number or boolean
         const tagText = String(tag);
+        const tagColor = getTagColor(tagText, tagOptions);
+        const tagIcon = getTagIcon(tagText, tagOptions);
+        const tagStyle = getTagStyle(tagText, tagOptions);
+        
         return (
           <div key={`${tag.split(' ').join('_')}-${index}`}>
-            <TagStyled color={getTagColor(tagText, tagOptions)} icon={getTagIcon(tagText, tagOptions)} key={index} >
+            <TagStyled 
+              color={tagColor} 
+              icon={tagIcon} 
+              key={index}
+              style={tagStyle}
+            >
               {tagText}
             </TagStyled>
           </div>

client/packages/lowcoder/src/comps/controls/optionsControl.tsx

@@ -41,6 +41,26 @@ import { ColorControl } from "./colorControl";
 import { StringStateControl } from "./codeStateControl";
 import { reduceInContext } from "../utils/reduceContext";
 
+// Tag preset color options
+const TAG_PRESET_COLORS = [
+  { label: "Magenta", value: "magenta" },
+  { label: "Red", value: "red" },
+  { label: "Volcano", value: "volcano" },
+  { label: "Orange", value: "orange" },
+  { label: "Gold", value: "gold" },
+  { label: "Lime", value: "lime" },
+  { label: "Green", value: "green" },
+  { label: "Cyan", value: "cyan" },
+  { label: "Blue", value: "blue" },
+  { label: "Geek Blue", value: "geekblue" },
+  { label: "Purple", value: "purple" },
+  { label: "Success", value: "success" },
+  { label: "Processing", value: "processing" },
+  { label: "Error", value: "error" },
+  { label: "Warning", value: "warning" },
+  { label: "Default", value: "default" },
+] as const;
+
 const OptionTypes = [
   {
     label: trans("prop.manual"),
@@ -729,24 +749,68 @@ let ColoredTagOption = new MultiCompBuilder(
   {
     label: StringControl,
     icon: IconControl,
-    color: withDefault(ColorControl, ""),
+    colorType: withDefault(dropdownControl([
+      { label: "Preset", value: "preset" },
+      { label: "Custom", value: "custom" },
+    ] as const, "preset"), "preset"),
+    presetColor: withDefault(dropdownControl(TAG_PRESET_COLORS, "blue"), "blue"),
+    color: withDefault(ColorControl, "#1890ff"),
+    textColor: withDefault(ColorControl, "#ffffff"),
+    border: withDefault(ColorControl, ""),
+    radius: withDefault(RadiusControl, ""),
+    margin: withDefault(StringControl, ""),
+    padding: withDefault(StringControl, ""),
   },
   (props) => props
 ).build();
 
 ColoredTagOption = class extends ColoredTagOption implements OptionCompProperty {
   propertyView(param: { autoMap?: boolean }) {
+    const colorType = this.children.colorType.getView();
     return (
       <>
         {this.children.label.propertyView({ label: trans("coloredTagOptionControl.tag") })}
         {this.children.icon.propertyView({ label: trans("coloredTagOptionControl.icon") })}
-        {this.children.color.propertyView({ label: trans("coloredTagOptionControl.color") })}
+        {this.children.colorType.propertyView({ 
+          label: "Color Type", 
+          radioButton: true 
+        })}
+        {colorType === "preset" && this.children.presetColor.propertyView({ 
+          label: "Preset Color" 
+        })}
+        {colorType === "custom" && (
+          <>
+            {this.children.color.propertyView({ label: trans("coloredTagOptionControl.color") })}
+            {this.children.textColor.propertyView({ label: "Text Color" })}
+          </>
+        )}
+        {this.children.border.propertyView({
+          label: trans('style.border')
+        })}
+        {this.children.radius.propertyView({
+          label: trans('style.borderRadius'),
+          preInputNode: <StyledIcon as={IconRadius} title="" />,	
+          placeholder: '3px',
+        })}
+        {this.children.margin.propertyView({
+          label: trans('style.margin'),
+          preInputNode: <StyledIcon as={ExpandIcon} title="" />,	
+          placeholder: '3px',
+        })}
+        {this.children.padding.propertyView({
+          label: trans('style.padding'),
+          preInputNode: <StyledIcon as={CompressIcon} title="" />,	
+          placeholder: '3px',
+        })}
       </>
     );
   }
 };
 
 export const ColoredTagOptionControl = optionsControl(ColoredTagOption, {
-  initOptions: [{ label: "Tag1", icon: "/icon:solid/tag", color: "#f50" }, { label: "Tag2", icon: "/icon:solid/tag", color: "#2db7f5" }],
+  initOptions: [
+    { label: "Tag1", icon: "/icon:solid/tag", colorType: "preset", presetColor: "blue" }, 
+    { label: "Tag2", icon: "/icon:solid/tag", colorType: "preset", presetColor: "green" }
+  ],
   uniqField: "label",
 });