@shwfed/config 2.10.3 → 2.10.5

package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.text/config.vue.d.ts

@@ -50,6 +50,73 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly warning?: boolean | undefined;
             readonly when: string;
         }[] | undefined;
+        readonly addon?: {
+            readonly size: "default" | "sm" | "xs";
+            readonly style?: string | undefined;
+            readonly gap: number;
+            readonly items: readonly (import("../../../../actions/schema.js").RegistryItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            } | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                    readonly disabled?: string | undefined;
+                    readonly id: string;
+                    readonly title: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]];
+                    readonly icon?: string | undefined;
+                    readonly hidden?: string | undefined;
+                    readonly tooltip?: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]] | undefined;
+                    readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                    readonly action?: any;
+                })[];
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            })[];
+            readonly groups: readonly {
+                readonly id: string;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            }[];
+        } | undefined;
     }) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_ModelProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: {
@@ -99,6 +166,73 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly warning?: boolean | undefined;
             readonly when: string;
         }[] | undefined;
+        readonly addon?: {
+            readonly size: "default" | "sm" | "xs";
+            readonly style?: string | undefined;
+            readonly gap: number;
+            readonly items: readonly (import("../../../../actions/schema.js").RegistryItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            } | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                    readonly disabled?: string | undefined;
+                    readonly id: string;
+                    readonly title: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]];
+                    readonly icon?: string | undefined;
+                    readonly hidden?: string | undefined;
+                    readonly tooltip?: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]] | undefined;
+                    readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                    readonly action?: any;
+                })[];
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            })[];
+            readonly groups: readonly {
+                readonly id: string;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            }[];
+        } | undefined;
     }) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.text/runtime.vue

@@ -9,6 +9,7 @@ import { getLocalizedText } from "../../../../../share/locale";
 import { Field, FieldLabel, FieldMessages } from "../../../../ui/field";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "../../../../ui/input-group";
 import { Markdown } from "../../../../ui/markdown";
+import ShwfedActions from "../../../../actions/components/group.vue";
 import { DEFAULT_FIELD_ORIENTATION } from "../../../utils/common";
 import { useFieldValue } from "../../../utils/field-value";
 import { useFieldValidation } from "../../../utils/validation";
@@ -56,6 +57,18 @@ const { isRequired, errors, warnings, visible } = useFieldValidation({
   $cel,
   locale: () => locale.value
 });
+const addonConfig = computed(() => {
+  const addon = props.config.addon;
+  if (!addon || addon.items.length === 0) return null;
+  return {
+    kind: "shwfed.component.action",
+    size: addon.size ?? "xs",
+    gap: addon.gap,
+    style: addon.style,
+    groups: addon.groups.map((group) => ({ ...group, variant: group.variant ?? "ghost" })),
+    items: addon.items
+  };
+});
 const showClear = computed(() => !isDisabled.value && draft.value.length > 0);
 function handleClear() {
   draft.value = "";
@@ -123,6 +136,13 @@ function handleClear() {
           <Icon icon="fluent:dismiss-20-regular" />
         </InputGroupButton>
       </InputGroupAddon>
+      <InputGroupAddon
+        v-if="addonConfig"
+        align="inline-end"
+        class="field-addon-actions"
+      >
+        <ShwfedActions :config="addonConfig" />
+      </InputGroupAddon>
     </InputGroup>
     <FieldMessages
       v-if="visible"
@@ -131,3 +151,7 @@ function handleClear() {
     />
   </Field>
 </template>
+
+<style scoped>
+.field-addon-actions :deep([data-slot=buttons]){align-items:center;gap:.125rem}.field-addon-actions :deep([data-slot=buttons-dropdown-trigger]),.field-addon-actions :deep([data-slot=buttons-item]){border-radius:.125rem;color:#71717a;height:1.5rem;min-width:1.5rem;padding:0}.field-addon-actions :deep([data-slot=buttons-dropdown-trigger]:hover:not(:disabled)),.field-addon-actions :deep([data-slot=buttons-item]:hover:not(:disabled)){color:#3f3f46}
+</style>

package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.text/schema.d.ts

@@ -46,6 +46,138 @@ export declare function schema(configure: (env: Environment) => void): Schema.St
         mode: Schema.Literal<["formula", "prefill"]>;
         expression: Schema.Schema<string, string, never>;
     }>>;
+    addon: Schema.optional<Schema.Struct<{
+        groups: Schema.optionalWith<Schema.Array$<Schema.Struct<{
+            id: Schema.refine<string, typeof Schema.String>;
+            variant: Schema.optional<Schema.Literal<["default", "primary", "destructive", "ghost", "link"]>>;
+        }>>, {
+            default: () => never[];
+        }>;
+        items: Schema.optionalWith<Schema.Array$<Schema.Schema<import("../../../../actions/schema.js").RegistryItemValue | {
+            readonly disabled?: string | undefined;
+            readonly id: string;
+            readonly title: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly icon?: string | undefined;
+            readonly hidden?: string | undefined;
+            readonly tooltip?: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]] | undefined;
+            readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            readonly action?: any;
+            readonly groupId: string;
+            readonly hideTitle?: boolean | undefined;
+        } | {
+            readonly id: string;
+            readonly title: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly icon?: string | undefined;
+            readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+            })[];
+            readonly groupId: string;
+            readonly hideTitle?: boolean | undefined;
+        }, import("../../../../actions/schema.js").RegistryItemValue | {
+            readonly id: string;
+            readonly title: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly groupId: string;
+            readonly disabled?: string | undefined;
+            readonly icon?: string | undefined;
+            readonly hidden?: string | undefined;
+            readonly tooltip?: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]] | undefined;
+            readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            readonly action?: any;
+            readonly hideTitle?: boolean | undefined;
+        } | {
+            readonly id: string;
+            readonly title: readonly [{
+                readonly locale: "zh";
+                readonly message: string;
+            }, ...{
+                readonly locale: "en" | "ja" | "ko";
+                readonly message: string;
+            }[]];
+            readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly disabled?: string | undefined;
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+            })[];
+            readonly groupId: string;
+            readonly icon?: string | undefined;
+            readonly hideTitle?: boolean | undefined;
+        }, never>>, {
+            default: () => never[];
+        }>;
+        size: Schema.optionalWith<Schema.Literal<["default", "sm", "xs"]>, {
+            default: () => "default";
+        }>;
+        gap: Schema.optionalWith<Schema.filter<Schema.filter<typeof Schema.Number>>, {
+            default: () => number;
+        }>;
+        style: Schema.optional<typeof Schema.String>;
+    }>>;
     id: Schema.refine<string, typeof Schema.String>;
     displayName: Schema.optional<Schema.SchemaClass<string, string, never>>;
     hidden: Schema.optional<Schema.Schema<string, string, never>>;

package/dist/runtime/components/form/fields/2026-04-22/com.shwfed.form.field.text/schema.js

@@ -1,7 +1,19 @@
 import { Schema } from "effect";
 import { Expression } from "../../../../../share/expression.js";
 import { Locale } from "../../../../../share/locale.js";
+import { ActionSchemaFields } from "../../../../actions/schema.js";
 import { commonFieldFields, derivedField, FieldOrientationSchema } from "../../../utils/common.js";
+function AddonActions(configure) {
+  const { groups, items, ...rest } = ActionSchemaFields(configure).fields;
+  return Schema.Struct({
+    ...rest,
+    groups: Schema.optionalWith(groups, { default: () => [] }),
+    items: Schema.optionalWith(items, { default: () => [] })
+  }).annotations({
+    title: "\u8F93\u5165\u6846\u5185\u6309\u94AE",
+    description: "\u5728\u8F93\u5165\u6846\u53F3\u4FA7\u5185\u5D4C\u4E00\u7EC4\u64CD\u4F5C\u6309\u94AE"
+  });
+}
 export const type = "com.shwfed.form.field.text";
 export const compatibilityDate = "2026-04-22";
 export const metadata = {
@@ -41,7 +53,8 @@ export function schema(configure) {
       title: "\u53EA\u8BFB\u6761\u4EF6",
       description: "\u8FD4\u56DE `true` \u65F6\u4EC5\u4EE5\u7EAF\u6587\u672C\u5C55\u793A\u5F53\u524D\u503C"
     })),
-    derived: derivedField(configure, "string")
+    derived: derivedField(configure, "string"),
+    addon: Schema.optional(AddonActions(configure))
   }).annotations({
     title: "TextField",
     description: "\u5355\u884C\u6587\u672C\u8F93\u5165"

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/config.d.vue.ts

@@ -53,6 +53,73 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly warning?: boolean | undefined;
             readonly when: string;
         }[] | undefined;
+        readonly addon?: {
+            readonly size: "default" | "sm" | "xs";
+            readonly style?: string | undefined;
+            readonly gap: number;
+            readonly items: readonly (import("../../../../actions/schema.js").RegistryItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            } | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                    readonly disabled?: string | undefined;
+                    readonly id: string;
+                    readonly title: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]];
+                    readonly icon?: string | undefined;
+                    readonly hidden?: string | undefined;
+                    readonly tooltip?: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]] | undefined;
+                    readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                    readonly action?: any;
+                })[];
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            })[];
+            readonly groups: readonly {
+                readonly id: string;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            }[];
+        } | undefined;
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
         readonly valueAsString?: boolean | undefined;
@@ -108,6 +175,73 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_ModelProps, {},
             readonly warning?: boolean | undefined;
             readonly when: string;
         }[] | undefined;
+        readonly addon?: {
+            readonly size: "default" | "sm" | "xs";
+            readonly style?: string | undefined;
+            readonly gap: number;
+            readonly items: readonly (import("../../../../actions/schema.js").RegistryItemValue | {
+                readonly disabled?: string | undefined;
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly hidden?: string | undefined;
+                readonly tooltip?: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]] | undefined;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                readonly action?: any;
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            } | {
+                readonly id: string;
+                readonly title: readonly [{
+                    readonly locale: "zh";
+                    readonly message: string;
+                }, ...{
+                    readonly locale: "en" | "ja" | "ko";
+                    readonly message: string;
+                }[]];
+                readonly icon?: string | undefined;
+                readonly items: readonly (import("../../../../actions/schema.js").RegistrySubItemValue | {
+                    readonly disabled?: string | undefined;
+                    readonly id: string;
+                    readonly title: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]];
+                    readonly icon?: string | undefined;
+                    readonly hidden?: string | undefined;
+                    readonly tooltip?: readonly [{
+                        readonly locale: "zh";
+                        readonly message: string;
+                    }, ...{
+                        readonly locale: "en" | "ja" | "ko";
+                        readonly message: string;
+                    }[]] | undefined;
+                    readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+                    readonly action?: any;
+                })[];
+                readonly groupId: string;
+                readonly hideTitle?: boolean | undefined;
+            })[];
+            readonly groups: readonly {
+                readonly id: string;
+                readonly variant?: "default" | "link" | "destructive" | "primary" | "ghost" | undefined;
+            }[];
+        } | undefined;
         readonly precision?: number | undefined;
         readonly roundingMode?: "round" | "floor" | "ceil" | undefined;
         readonly valueAsString?: boolean | undefined;

package/dist/runtime/components/form/fields/2026-04-28/com.shwfed.form.field.number/config.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { computed } from "vue";
+import { computed, inject, onBeforeUnmount, ref, watch } from "vue";
 import { Icon } from "@iconify/vue";
 import {
   DropdownMenu,
@@ -10,6 +10,7 @@ import {
 import { ExpressionEditor } from "../../../../ui/expression-editor";
 import DerivedValueEditor from "../../../DerivedValueEditor.vue";
 import ValidationRulesField from "../../../ValidationRulesField.vue";
+import { Button } from "../../../../ui/button";
 import { Field, FieldLabel } from "../../../../ui/field";
 import {
   InputGroup,
@@ -20,6 +21,7 @@ import {
 } from "../../../../ui/input-group";
 import { Locale as LocaleField } from "../../../../ui/locale";
 import { Markdown } from "../../../../ui/markdown";
+import ActionsConfigEditor from "../../../../actions/config.vue";
 import {
   Select,
   SelectContent,
@@ -29,6 +31,8 @@ import {
 } from "../../../../ui/select";
 import { Switch } from "../../../../ui/switch";
 import { getStructFieldDescription, getStructFieldTitle } from "../../../schema";
+import { FORM_FIELD_LAYOUT_KEY } from "../../../field-layout";
+import { BREADCRUMB_EXTENSION_KEY } from "../../../../config/breadcrumb-extension";
 import { DEFAULT_FIELD_ORIENTATION, FIELD_ORIENTATION_OPTIONS } from "../../../utils/common";
 import { schema } from "./schema";
 defineOptions({ name: "ShwfedNumberFieldConfig" });
@@ -37,6 +41,47 @@ const fieldSchema = schema(() => {
 });
 const fieldTitle = (f) => getStructFieldTitle(fieldSchema, f) ?? f;
 const fieldDescription = (f) => getStructFieldDescription(fieldSchema, f);
+const layout = inject(FORM_FIELD_LAYOUT_KEY, null);
+const breadcrumbExt = inject(BREADCRUMB_EXTENSION_KEY, null);
+const editingAddon = ref(false);
+function closeAddon() {
+  editingAddon.value = false;
+}
+const addonCrumb = breadcrumbExt?.add();
+watch(editingAddon, (on) => {
+  if (layout) layout.fullPane.value = on;
+  if (addonCrumb) {
+    addonCrumb.label.value = on ? "\u8F93\u5165\u6846\u5185\u6309\u94AE" : null;
+    addonCrumb.back.value = on ? closeAddon : null;
+  }
+});
+onBeforeUnmount(() => {
+  if (layout) layout.fullPane.value = false;
+  addonCrumb?.dispose();
+});
+const addonItemCount = computed(() => value.value.addon?.items.length ?? 0);
+const addonValue = computed({
+  get: () => ({
+    kind: "shwfed.component.action",
+    size: value.value.addon?.size ?? "xs",
+    gap: value.value.addon?.gap ?? 4,
+    style: value.value.addon?.style,
+    groups: value.value.addon?.groups ?? [],
+    items: value.value.addon?.items ?? []
+  }),
+  set: (next) => {
+    const { size, gap, style, groups, items } = next;
+    if (groups.length === 0 && items.length === 0) {
+      const { addon: _omit, ...rest } = value.value;
+      value.value = rest;
+      return;
+    }
+    value.value = {
+      ...value.value,
+      addon: { size, gap, groups, items, ...style === void 0 ? {} : { style } }
+    };
+  }
+});
 const ROUNDING_MODE_OPTIONS = [
   { value: "round", label: "\u56DB\u820D\u4E94\u5165" },
   { value: "floor", label: "\u5411\u4E0B\u53D6\u6574" },
@@ -89,7 +134,16 @@ function onValueAsStringChange(next) {
 </script>
 
 <template>
-  <div class="flex flex-col gap-3">
+  <ActionsConfigEditor
+    v-if="editingAddon"
+    v-model="addonValue"
+    hide-size
+  />
+
+  <div
+    v-else
+    class="flex flex-col gap-3"
+  >
     <div class="grid grid-cols-2 gap-3">
       <Field orientation="vertical">
         <FieldLabel class="text-xs text-zinc-500">
@@ -491,5 +545,26 @@ function onValueAsStringChange(next) {
         @update:model-value="(v) => value = { ...value, validations: v.length > 0 ? v : void 0 }"
       />
     </Field>
+
+    <Field orientation="vertical">
+      <FieldLabel class="text-xs text-zinc-500">
+        <template #tooltip>
+          <Markdown
+            :source="fieldDescription('addon')"
+            block
+            class="prose prose-sm prose-zinc"
+          />
+        </template>
+        {{ fieldTitle("addon") }}
+      </FieldLabel>
+      <Button
+        type="button"
+        class="w-full justify-center"
+        @click="editingAddon = true"
+      >
+        <Icon icon="fluent:add-20-regular" />
+        <span>{{ addonItemCount > 0 ? "\u914D\u7F6E\u6309\u94AE" : "\u6DFB\u52A0\u6309\u94AE" }}</span>
+      </Button>
+    </Field>
   </div>
 </template>