Merge pull request #2109 from iamfaran/feat/theme-style-comps

[Feat]: add select component selected/active styles

Author: raheeliftikhar5

client/packages/lowcoder/src/comps/comps/selectInputComp/cascaderComp.tsx

@@ -32,6 +32,9 @@ const DropdownRenderStyle = styled.div<{ $childrenInputFieldStyle: ChildrenMulti
     text-decoration: ${props => props.$childrenInputFieldStyle?.textDecoration};
     color: ${props => props.$childrenInputFieldStyle?.text};
     }
+    .ant-cascader-menu-item-active:not(.ant-cascader-menu-item-disabled) {
+      background-color: ${props => props.$childrenInputFieldStyle?.activeBackground ? `${props.$childrenInputFieldStyle.activeBackground}22` : 'rgb(242, 247, 252)'};
+    }
 `
 
 let CascaderBasicComp = (function () {

client/packages/lowcoder/src/comps/comps/selectInputComp/selectCompConstants.tsx

@@ -217,6 +217,12 @@ export const DropdownStyled = styled.div<{ $style: ChildrenMultiSelectStyleType
     min-width: 14px;
     margin-right: 0;
   }
+  .ant-select-item-option-selected:not(.ant-select-item-option-disabled) {
+    background-color: ${props => props.$style?.selectBackground ? `${props.$style.selectBackground}` : 'transparent'};
+  }
+  .ant-select-item-option-active:not(.ant-select-item-option-disabled) {
+    background-color: ${props => props.$style?.activeBackground ? `${props.$style.activeBackground}` : 'transparent'};
+  }
 `;
 
 const Wrapper = styled.span`

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

@@ -1555,7 +1555,21 @@ export const MultiSelectStyle = [
 
 export const ChildrenMultiSelectStyle = [
   ...STYLING_FIELDS_SEQUENCE,
-  getBackground()
+  getBackground(),
+  {
+    name: "activeBackground",
+    label: trans("style.activeBackground"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: handleLightenColor,
+  },
+  {
+    name: "selectBackground",
+    label: trans("style.selectBackground"),
+    depTheme: "primary",
+    depType: DEP_TYPE.SELF,
+    transformer: toSelf,
+  }
 ] as const;
 
 export const TabContainerStyle = [

client/packages/lowcoder/src/i18n/locales/en.ts

@@ -592,6 +592,7 @@ export const en = {
     "siderBackgroundImagePosition": "Sider Background Image Position",
     "siderBackgroundImageOrigin": "Sider Background Image Origin",
     "activeBackground": "Active Background Color",
+    "selectBackground": "Selected Background Color",
     "labelBackground": "Label Background Color",
     "gradientBackground": "Gradient Background Color",
     "direction": "Direction",