feat: new color field

apps/nestjs-backend/src/db-provider/create-database-column-query/create-database-column-field-visitor.postgres.ts

@@ -1,11 +1,17 @@
 import type {
   AttachmentFieldCore,
   AutoNumberFieldCore,
+  ButtonFieldCore,
   CheckboxFieldCore,
+  ColorFieldCore,
+  ConditionalRollupFieldCore,
   CreatedByFieldCore,
   CreatedTimeFieldCore,
   DateFieldCore,
+  FieldCore,
   FormulaFieldCore,
+  IFieldVisitor,
+  ILinkFieldOptions,
   LastModifiedByFieldCore,
   LastModifiedTimeFieldCore,
   LinkFieldCore,
@@ -14,14 +20,9 @@ import type {
   NumberFieldCore,
   RatingFieldCore,
   RollupFieldCore,
-  ConditionalRollupFieldCore,
   SingleLineTextFieldCore,
   SingleSelectFieldCore,
   UserFieldCore,
-  IFieldVisitor,
-  FieldCore,
-  ILinkFieldOptions,
-  ButtonFieldCore,
 } from '@teable/core';
 import { DbFieldType, Relationship } from '@teable/core';
 import type { Knex } from 'knex';
@@ -377,6 +378,10 @@ export class CreatePostgresDatabaseColumnFieldVisitor implements IFieldVisitor<v
     this.createStandardColumn(field);
   }
 
+  visitColorField(field: ColorFieldCore): void {
+    this.createStandardColumn(field);
+  }
+
   // Formula field types
   visitFormulaField(field: FormulaFieldCore): void {
     this.createFormulaColumns(field);

apps/nestjs-backend/src/db-provider/drop-database-column-query/drop-database-column-field-visitor.postgres.ts

@@ -24,6 +24,7 @@ import type {
   FieldCore,
   ILinkFieldOptions,
   ButtonFieldCore,
+  ColorFieldCore,
 } from '@teable/core';
 import { DropColumnOperationType } from './drop-database-column-field-visitor.interface';
 import type { IDropDatabaseColumnContext } from './drop-database-column-field-visitor.interface';
@@ -215,6 +216,10 @@ export class DropPostgresDatabaseColumnFieldVisitor implements IFieldVisitor<str
     return this.dropStandardColumn(field);
   }
 
+  visitColorField(field: ColorFieldCore): string[] {
+    return this.dropStandardColumn(field);
+  }
+
   // Formula field types
   visitFormulaField(field: FormulaFieldCore): string[] {
     return this.dropFormulaColumns(field);

apps/nestjs-backend/src/features/field/field-calculate/field-supplement.service.ts

@@ -5,6 +5,7 @@ import {
   AutoNumberFieldCore,
   ButtonFieldCore,
   CellValueType,
+  ColorFieldCore,
   CheckboxFieldCore,
   ColorUtils,
   ConditionalRollupFieldCore,
@@ -1507,6 +1508,18 @@ export class FieldSupplementService {
     };
   }
 
+  private prepareColorField(field: IFieldRo) {
+    const { name, options } = field;
+
+    return {
+      ...field,
+      name: name ?? 'Color',
+      options: options ?? ColorFieldCore.defaultOptions(),
+      cellValueType: CellValueType.String,
+      dbFieldType: DbFieldType.Text,
+    };
+  }
+
   private async prepareCreateFieldInner(
     tableId: string,
     fieldRo: IFieldRo,
@@ -1557,6 +1570,8 @@ export class FieldSupplementService {
         return this.prepareCheckboxField(fieldRo);
       case FieldType.Button:
         return this.prepareButtonField(fieldRo);
+      case FieldType.Color:
+        return this.prepareColorField(fieldRo);
       default:
         throw new CustomHttpException(
           `Unsupported field type ${fieldRo.type}`,
@@ -1666,6 +1681,8 @@ export class FieldSupplementService {
         return this.prepareCheckboxField(fieldRo);
       case FieldType.Button:
         return this.prepareButtonField(fieldRo);
+      case FieldType.Color:
+        return this.prepareColorField(fieldRo);
       case FieldType.LastModifiedBy:
         return this.prepareLastModifiedByField(fieldRo);
       case FieldType.CreatedBy:

apps/nestjs-backend/src/features/field/model/factory.ts

@@ -11,6 +11,7 @@ import { instanceToPlain, plainToInstance } from 'class-transformer';
 import { AttachmentFieldDto } from './field-dto/attachment-field.dto';
 import { AutoNumberFieldDto } from './field-dto/auto-number-field.dto';
 import { ButtonFieldDto } from './field-dto/button-field.dto';
+import { ColorFieldDto } from './field-dto/color-field.dto';
 import { CheckboxFieldDto } from './field-dto/checkbox-field.dto';
 import { ConditionalRollupFieldDto } from './field-dto/conditional-rollup-field.dto';
 import { CreatedByFieldDto } from './field-dto/created-by-field.dto';
@@ -173,6 +174,8 @@ export function createFieldInstanceByVo(field: IFieldVo) {
       return plainToInstance(LastModifiedByFieldDto, normalizedField);
     case FieldType.Button:
       return plainToInstance(ButtonFieldDto, normalizedField);
+    case FieldType.Color:
+      return plainToInstance(ColorFieldDto, normalizedField);
     default:
       assertNever(normalizedField.type);
   }

apps/nestjs-backend/src/features/field/model/field-dto/color-field.dto.ts

@@ -0,0 +1,22 @@
+import { ColorFieldCore } from '@teable/core';
+import type { FieldBase } from '../field-base';
+
+export class ColorFieldDto extends ColorFieldCore implements FieldBase {
+  get isStructuredCellValue() {
+    return false;
+  }
+
+  convertCellValue2DBValue(value: unknown): unknown {
+    if (this.isMultipleCellValue) {
+      return value == null ? value : JSON.stringify(value);
+    }
+    return value;
+  }
+
+  convertDBValue2CellValue(value: unknown): unknown {
+    if (this.isMultipleCellValue) {
+      return value == null || typeof value === 'object' ? value : JSON.parse(value as string);
+    }
+    return value;
+  }
+}

apps/nestjs-backend/src/features/record/query-builder/field-cte-visitor.ts

@@ -34,6 +34,7 @@ import {
   type SingleSelectFieldCore,
   type UserFieldCore,
   type ButtonFieldCore,
+  type ColorFieldCore,
   type Tables,
   type TableDomain,
   type ILinkFieldOptions,
@@ -709,6 +710,9 @@ class FieldCteSelectionVisitor implements IFieldVisitor<IFieldSelectName> {
   visitButtonField(field: ButtonFieldCore): IFieldSelectName {
     return this.visitLookupField(field);
   }
+  visitColorField(field: ColorFieldCore): IFieldSelectName {
+    return this.visitLookupField(field);
+  }
 }
 
 export class FieldCteVisitor implements IFieldVisitor<ICteResult> {
@@ -2821,6 +2825,7 @@ export class FieldCteVisitor implements IFieldVisitor<ICteResult> {
   visitCreatedByField(_field: CreatedByFieldCore): void {}
   visitLastModifiedByField(_field: LastModifiedByFieldCore): void {}
   visitButtonField(_field: ButtonFieldCore): void {}
+  visitColorField(_field: ColorFieldCore): void {}
 
   private ensureLinkCteJoined(cteName: string): void {
     if (this.state.isCteJoined(cteName)) {

apps/nestjs-backend/src/features/record/query-builder/field-formatting-visitor.ts

@@ -21,6 +21,7 @@ import {
   type CreatedByFieldCore,
   type LastModifiedByFieldCore,
   type ButtonFieldCore,
+  type ColorFieldCore,
   type INumberFormatting,
   type IDatetimeFormatting,
 } from '@teable/core';
@@ -243,4 +244,8 @@ export class FieldFormattingVisitor implements IFieldVisitor<string> {
     // Button fields don't have values, return as-is
     return this.fieldExpression;
   }
+
+  visitColorField(_field: ColorFieldCore): string {
+    return this.fieldExpression;
+  }
 }

apps/nestjs-backend/src/features/record/query-builder/field-select-visitor.ts

@@ -22,6 +22,7 @@ import type {
   UserFieldCore,
   IFieldVisitor,
   ButtonFieldCore,
+  ColorFieldCore,
   TableDomain,
 } from '@teable/core';
 import { DbFieldType, FieldType, isLinkLookupOptions, DriverClient } from '@teable/core';
@@ -578,6 +579,10 @@ export class FieldSelectVisitor implements IFieldVisitor<IFieldSelectName> {
     return this.checkAndSelectLookupField(field);
   }
 
+  visitColorField(field: ColorFieldCore): IFieldSelectName {
+    return this.checkAndSelectLookupField(field);
+  }
+
   // Formula field types - these may use generated columns
   visitFormulaField(field: FormulaFieldCore): IFieldSelectName {
     // If the formula field has an error (e.g., referenced field deleted), return NULL

apps/nestjs-backend/src/types/i18n.generated.ts

@@ -2071,6 +2071,9 @@ export type I18nTranslations = {
                 "refineOptionsError": string;
                 "optionsRequired": string;
             };
+            "color": {
+                "button": string;
+            };
         };
         "filter": {
             "label": string;
@@ -2259,6 +2262,7 @@ export type I18nTranslations = {
                 "button": string;
                 "createdBy": string;
                 "lastModifiedBy": string;
+                "color": string;
             };
             "description": {
                 "singleLineText": string;
@@ -2283,6 +2287,7 @@ export type I18nTranslations = {
                 "button": string;
                 "createdBy": string;
                 "lastModifiedBy": string;
+                "color": string;
             };
             "link": {
                 "oneWay": string;
@@ -3876,6 +3881,9 @@ export type I18nTranslations = {
                     "title": string;
                     "description": string;
                 };
+                "color": {
+                    "title": string;
+                };
             };
             "editor": {
                 "addField": string;
@@ -4019,6 +4027,7 @@ export type I18nTranslations = {
                 "button": string;
                 "lookup": string;
                 "conditionalRollup": string;
+                "color": string;
             };
             "fieldName": string;
             "fieldNameOptional": string;

apps/nextjs-app/src/features/app/components/field-setting/FieldOptions.tsx

@@ -29,6 +29,7 @@ import { useFields } from '@teable/sdk/hooks';
 import { useMemo } from 'react';
 import { ButtonOptions } from './options/ButtonOptions';
 import { CheckboxOptions } from './options/CheckboxOptions';
+import { ColorOptions } from './options/ColorOptions';
 import { ConditionalRollupOptions } from './options/ConditionalRollupOptions';
 import { CreatedTimeOptions } from './options/CreatedTimeOptions';
 import { DateOptions } from './options/DateOptions';
@@ -202,6 +203,8 @@ export const FieldOptions: React.FC<IFieldOptionsProps> = ({ field, onChange, on
           onSave={onSave}
         />
       );
+    case FieldType.Color:
+      return <ColorOptions />;
     default:
       return <></>;
   }

apps/nextjs-app/src/features/app/components/field-setting/SelectFieldType.tsx

@@ -47,6 +47,7 @@ export const FIELD_TYPE_ORDER1 = [
   FieldType.Date,
   FieldType.Rating,
   FieldType.Checkbox,
+  FieldType.Color,
   FieldType.Attachment,
   FieldType.Formula,
   FieldType.Link,
@@ -70,6 +71,7 @@ const BASE_FIELD_TYPE = [
   FieldType.Date,
   FieldType.Rating,
   FieldType.Checkbox,
+  FieldType.Color,
   FieldType.Attachment,
 ];
 

apps/nextjs-app/src/features/app/components/field-setting/options/ColorOptions.tsx

@@ -0,0 +1 @@
+export const ColorOptions = () => null;

apps/nextjs-app/src/features/app/components/field-setting/useFieldTypeSubtitle.ts

@@ -49,6 +49,8 @@ export const useFieldTypeSubtitle = () => {
           return t('table:field.subTitle.autoNumber');
         case FieldType.Button:
           return t('table:field.subTitle.button');
+        case FieldType.Color:
+          return t('table:field.subTitle.color');
         default: {
           assertNever(fieldType);
         }

packages/common-i18n/src/locales/en/sdk.json

@@ -81,6 +81,9 @@
       "from": "From",
       "to": "To"
     },
+    "color": {
+      "button": "Pick a color"
+    },
     "formula": {
       "title": "Formula editor",
       "guideSyntax": "Syntax",
@@ -344,6 +347,7 @@
       "lookup": "Lookup",
       "conditionalLookup": "Conditional lookup",
       "button": "Button",
+      "color": "Color",
       "createdBy": "Created by",
       "lastModifiedBy": "Last modified by"
     },
@@ -368,6 +372,7 @@
       "lookup": "Display values from linked records.",
       "conditionalLookup": "Show linked values that match filters you define.",
       "button": "Run actions with a clickable button.",
+      "color": "Store a color value as a hex code.",
       "createdBy": "Show who created the record.",
       "lastModifiedBy": "Show who last modified the record."
     },

packages/common-i18n/src/locales/en/table.json

@@ -181,6 +181,9 @@
       "checkbox": {
         "title": "Done"
       },
+      "color": {
+        "title": "Color"
+      },
       "button": {
         "title": "Button",
         "label": "Button label",
@@ -386,6 +389,7 @@
       "lastModifiedBy": "See which user made the most recent edit to some or all fields in a record.",
       "autoNumber": "Automatically generate unique incremental numbers for each record.",
       "button": "Trigger a customized action.",
+      "color": "Store a color value as a hex code.",
       "lookup": "See values from a field in a linked record."
     },
     "fieldName": "Field name",

packages/core/src/models/field/cell-value-validation.ts

@@ -57,6 +57,8 @@ export const validateCellValue = (field: IFieldVo, cellValue: unknown) => {
     }
     case FieldType.Button:
       return validateWithSchema(buttonFieldCelValueSchema, cellValue);
+    case FieldType.Color:
+      return validateWithSchema(singleLineTextCelValueSchema, cellValue);
     default:
       assertNever(type);
   }

packages/core/src/models/field/constant.ts

@@ -20,6 +20,7 @@ export enum FieldType {
   LastModifiedBy = 'lastModifiedBy',
   AutoNumber = 'autoNumber',
   Button = 'button',
+  Color = 'color',
 }
 
 export enum DbFieldType {
@@ -72,6 +73,7 @@ export const PRIMARY_SUPPORTED_TYPES = new Set([
   FieldType.CreatedBy,
   FieldType.LastModifiedBy,
   FieldType.AutoNumber,
+  FieldType.Color,
 ]);
 
 export const IMPORT_SUPPORTED_TYPES = [

packages/core/src/models/field/derivate/color-option.schema.ts

@@ -0,0 +1,5 @@
+import { z } from '../../../zod';
+
+export const colorFieldOptionsSchema = z.object({});
+
+export type IColorFieldOptions = z.infer<typeof colorFieldOptionsSchema>;