@flowgram-vue/form-materials 0.2.0

package/src/components/json-schema-editor/property-edit.vue

@@ -0,0 +1,222 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, h, ref, type PropType } from 'vue';
+import { IJsonSchema, JsonSchemaTypeManager, useTypeManager } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { InjectTypeSelector } from '@/components/type-selector';
+import { BlurInput } from '@/components/blur-input';
+import {
+  FgCheckbox,
+  FgIconButton,
+  IconAddChildren,
+  IconChevronDown,
+  IconChevronRight,
+  IconExpand,
+  IconMinus,
+  IconShrink,
+} from '@/ui';
+
+import type { ConfigType, PropertyValueType } from './types';
+import { usePropertiesEdit } from './hooks';
+import DefaultValue from './default-value.vue';
+
+function getSchemaDefaultValue(
+  typeManager: JsonSchemaTypeManager,
+  schema: Partial<IJsonSchema> | undefined
+) {
+  if (schema?.type === 'object') {
+    return '{}';
+  }
+  if (schema?.type === 'array') {
+    return '[]';
+  }
+  return typeManager.getDefaultValue(schema || {});
+}
+
+const PropertyEdit = defineComponent({
+  name: 'PropertyEdit',
+  props: {
+    value: { type: Object as PropType<PropertyValueType> },
+    config: { type: Object as PropType<ConfigType> },
+    onChange: { type: Function as PropType<(value: PropertyValueType) => void> },
+    onRemove: { type: Function as PropType<() => void> },
+    readonly: { type: Boolean, default: false },
+    $isLast: { type: Boolean, default: false },
+    $level: { type: Number, default: 0 },
+  },
+  setup(props) {
+    const expand = ref(false);
+    const collapse = ref(false);
+    const typeManagerInner = useTypeManager() as JsonSchemaTypeManager;
+    const typeSelectorValue = computed(() => ({
+      type: props.value?.type,
+      items: props.value?.items,
+    }));
+    const nested = usePropertiesEdit(props.value, props.onChange);
+    const showCollapse = computed(
+      () => nested.canAddField.value && nested.propertyList.value.length > 0
+    );
+
+    const onFieldChange = (key: string, next: unknown) => {
+      props.onChange?.({
+        ...(props.value || {}),
+        [key]: next,
+      });
+    };
+
+    return () =>
+      h('div', { style: { display: 'contents' } }, [
+        h(
+          'div',
+          {
+            class: `gedit-m-json-schema-editor-tree-item-left ${props.$level > 0 ? 'show-line' : ''} ${
+              props.$isLast ? 'is-last' : ''
+            } ${showCollapse.value ? 'show-collapse' : ''}`,
+          },
+          showCollapse.value
+            ? [
+                h(
+                  'div',
+                  {
+                    class: 'gedit-m-json-schema-editor-collapse-trigger',
+                    onClick: () => {
+                      collapse.value = !collapse.value;
+                    },
+                  },
+                  [collapse.value ? h(IconChevronDown) : h(IconChevronRight)]
+                ),
+              ]
+            : []
+        ),
+        h('div', { class: 'gedit-m-json-schema-editor-tree-item-right' }, [
+          h('div', { class: 'gedit-m-json-schema-editor-tree-item-main' }, [
+            h('div', { class: 'gedit-m-json-schema-editor-row' }, [
+              h('div', { class: 'gedit-m-json-schema-editor-name' }, [
+                h(BlurInput, {
+                  disabled: props.readonly,
+                  placeholder: props.config?.placeholder ?? I18n.t('Input Variable Name'),
+                  value: props.value?.name,
+                  onChange: (v: string) => onFieldChange('name', v),
+                }),
+              ]),
+              h('div', { class: 'gedit-m-json-schema-editor-type' }, [
+                h(InjectTypeSelector, {
+                  value: typeSelectorValue.value,
+                  readonly: props.readonly,
+                  onChange: (_value?: Partial<IJsonSchema>) => {
+                    const nextTypeSchema = _value || {};
+                    props.onChange?.({
+                      ...(props.value || {}),
+                      ...nextTypeSchema,
+                      default: getSchemaDefaultValue(typeManagerInner, nextTypeSchema),
+                    });
+                  },
+                }),
+              ]),
+              h('div', { class: 'gedit-m-json-schema-editor-required' }, [
+                h(FgCheckbox, {
+                  disabled: props.readonly,
+                  checked: props.value?.isPropertyRequired,
+                  onChange: (checked: boolean) => onFieldChange('isPropertyRequired', checked),
+                }),
+              ]),
+              h('div', { class: 'gedit-m-json-schema-editor-actions' }, [
+                h(FgIconButton, {
+                  disabled: props.readonly,
+                  icon: expand.value ? IconShrink() : IconExpand(),
+                  onClick: () => {
+                    expand.value = !expand.value;
+                  },
+                }),
+                nested.canAddField.value
+                  ? h(FgIconButton, {
+                      disabled: props.readonly,
+                      icon: IconAddChildren(),
+                      onClick: () => {
+                        nested.onAddProperty();
+                        collapse.value = true;
+                      },
+                    })
+                  : null,
+                h(FgIconButton, {
+                  disabled: props.readonly,
+                  icon: IconMinus(),
+                  onClick: () => props.onRemove?.(),
+                }),
+              ]),
+            ]),
+            expand.value
+              ? h('div', { class: 'gedit-m-json-schema-editor-expand-detail' }, [
+                  h('div', { class: 'gedit-m-json-schema-editor-label' }, [
+                    props.config?.descTitle ?? I18n.t('Description'),
+                  ]),
+                  h(BlurInput, {
+                    disabled: props.readonly,
+                    value: props.value?.description,
+                    placeholder:
+                      props.config?.descPlaceholder ?? I18n.t('Help LLM to understand the property'),
+                    onChange: (v: string) => onFieldChange('description', v),
+                  }),
+                  props.$level === 0
+                    ? h('div', {}, [
+                        h(
+                          'div',
+                          { class: 'gedit-m-json-schema-editor-label', style: { marginTop: '10px' } },
+                          props.config?.defaultValueTitle ?? I18n.t('Default Value')
+                        ),
+                        h('div', { class: 'gedit-m-json-schema-editor-default-value-wrapper' }, [
+                          h(DefaultValue, {
+                            value: props.value?.default,
+                            schema: props.value,
+                            placeholder:
+                              props.config?.defaultValuePlaceholder ?? I18n.t('Default Value'),
+                            onChange: (v: unknown) => onFieldChange('default', v),
+                          }),
+                        ]),
+                      ])
+                    : null,
+                ])
+              : null,
+          ]),
+          showCollapse.value
+            ? h(
+                'div',
+                {
+                  class: `gedit-m-json-schema-editor-collapsible ${collapse.value ? 'collapse' : ''}`,
+                },
+                [
+                  h(
+                    'div',
+                    { class: 'gedit-m-json-schema-editor-tree-items shrink' },
+                    nested.propertyList.value.map((_property, index) =>
+                      h(PropertyEdit, {
+                        readonly: props.readonly,
+                        key: _property.key,
+                        value: _property,
+                        config: props.config,
+                        $level: (props.$level || 0) + 1,
+                        $isLast: index === nested.propertyList.value.length - 1,
+                        onChange: (_v: PropertyValueType) => {
+                          nested.onEditProperty(_property.key!, _v);
+                        },
+                        onRemove: () => {
+                          nested.onRemoveProperty(_property.key!);
+                        },
+                      })
+                    )
+                  ),
+                ]
+              )
+            : null,
+        ]),
+      ]);
+  },
+});
+
+export default PropertyEdit;
+</script>

package/src/components/json-schema-editor/styles.css

@@ -0,0 +1,135 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-json-schema-editor-container {
+  /* & .semi-input {
+    background-color: #fff;
+    border-radius: 6px;
+    height: 24px;
+  } */
+}
+
+.gedit-m-json-schema-editor-row {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.gedit-m-json-schema-editor-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-json-schema-editor-expand-detail {
+  display: flex;
+  flex-direction: column;
+}
+
+.gedit-m-json-schema-editor-label {
+  font-size: 12px;
+  color: #999;
+  font-weight: 400;
+  margin-bottom: 2px;
+}
+
+.gedit-m-json-schema-editor-tree-items {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.gedit-m-json-schema-editor-tree-items.shrink {
+  padding-left: 3px;
+  margin-top: 10px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left {
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::before {
+  /* 竖线 */
+  content: "";
+  height: var(--line-height, 100%);
+  position: absolute;
+  left: -14px;
+  top: -16px;
+  width: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line::after {
+  /* 横线 */
+  content: "";
+  position: absolute;
+  left: -14px; /* 横线起点和竖线对齐 */
+  top: 8px; /* 跟随你的行高调整 */
+  width: var(--line-width, 30px); /* 横线长度 */
+  height: 1px;
+  background: #d9d9d9;
+  display: block;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.is-last::before {
+  height: 24px;
+}
+
+.gedit-m-json-schema-editor-tree-item-left.show-line.show-collapse::after {
+  width: 12px;
+}
+
+.gedit-m-json-schema-editor-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.gedit-m-json-schema-editor-tree-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.gedit-m-json-schema-editor-collapsible {
+  display: none;
+}
+
+.gedit-m-json-schema-editor-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-json-schema-editor-name {
+  flex-grow: 1;
+}
+
+.gedit-m-json-schema-editor-type {
+}
+
+.gedit-m-json-schema-editor-required {
+}
+
+.gedit-m-json-schema-editor-actions {
+  white-space: nowrap;
+}
+
+.gedit-m-json-schema-editor-default-value-wrapper {
+  margin: 0;
+}
+
+.gedit-m-json-schema-editor-constant-input-wrapper {
+  flex-grow: 1;
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+  }
+}

package/src/components/json-schema-editor/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+export interface PropertyValueType extends IJsonSchema {
+  name?: string;
+  key?: number;
+  isPropertyRequired?: boolean;
+}
+
+export type PropertiesValueType = Pick<PropertyValueType, 'properties' | 'required'>;
+
+export type JsonSchemaProperties = IJsonSchema['properties'];
+
+export interface ConfigType {
+  placeholder?: string;
+  descTitle?: string;
+  descPlaceholder?: string;
+  defaultValueTitle?: string;
+  defaultValuePlaceholder?: string;
+  addButtonText?: string;
+}

package/src/components/prompt-editor/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as PromptEditor } from './prompt-editor.vue';
+export type { PromptEditorPropsType } from './types';

package/src/components/prompt-editor/prompt-editor.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties } from 'vue';
+import { IFlowTemplateValue } from '@/shared';
+
+defineProps<{
+  value?: IFlowTemplateValue;
+  onChange?: (value?: IFlowTemplateValue) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+  disableMarkdownHighlight?: boolean;
+  style?: CSSProperties;
+  options?: Record<string, unknown>;
+}>();
+</script>
+
+<template>
+  <div class="gedit-m-prompt-editor-container" :class="{ 'has-error': hasError }" :style="style">
+    <textarea
+      class="fg-textarea"
+      :value="value?.content"
+      :disabled="readonly"
+      :placeholder="placeholder || activeLinePlaceholder"
+      :style="{ minHeight: '80px', fontFamily: 'monospace' }"
+      @input="
+        onChange?.({
+          type: 'template',
+          content: ($event.target as HTMLTextAreaElement).value,
+        })
+      "
+    />
+    <slot />
+  </div>
+</template>

package/src/components/prompt-editor/styles.css

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-prompt-editor-container {
+  background-color: var(--semi-color-fill-0);
+  padding-left: 10px;
+  padding-right: 6px;
+}
+
+.gedit-m-prompt-editor-container.has-error {
+  border: 1px solid var(--semi-color-danger-6);
+}

package/src/components/prompt-editor/types.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties, VNode } from 'vue';
+import { IFlowTemplateValue } from '@/shared';
+
+export type PromptEditorPropsType = {
+  value?: IFlowTemplateValue;
+  onChange: (value?: IFlowTemplateValue) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+  disableMarkdownHighlight?: boolean;
+  style?: CSSProperties;
+  options?: Record<string, unknown>;
+  children?: VNode;
+};

package/src/components/prompt-editor-with-inputs/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as PromptEditorWithInputs } from './prompt-editor-with-inputs.vue';
+export type { PromptEditorWithInputsProps } from './types';

package/src/components/prompt-editor-with-inputs/prompt-editor-with-inputs.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PromptEditor, type PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorInputsTree } from '@/components/coze-editor-extensions';
+import type { PromptEditorWithInputsProps } from './types';
+
+defineProps<PromptEditorWithInputsProps>();
+</script>
+
+<template>
+  <PromptEditor v-bind="$props">
+    <EditorInputsTree :inputs-values="inputsValues" />
+  </PromptEditor>
+</template>

package/src/components/prompt-editor-with-inputs/types.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IInputsValues } from '@/shared/flow-value';
+import { type PromptEditorPropsType } from '@/components/prompt-editor';
+
+export interface PromptEditorWithInputsProps extends PromptEditorPropsType {
+  inputsValues: IInputsValues;
+}

package/src/components/prompt-editor-with-variables/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as PromptEditorWithVariables } from './prompt-editor-with-variables.vue';
+export type { PromptEditorWithVariablesProps } from './types';

package/src/components/prompt-editor-with-variables/prompt-editor-with-variables.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PromptEditor, type PromptEditorPropsType } from '@/components/prompt-editor';
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
+import type { PromptEditorWithVariablesProps } from './types';
+
+defineProps<PromptEditorWithVariablesProps>();
+</script>
+
+<template>
+  <PromptEditor v-bind="$props">
+    <EditorVariableTree />
+    <EditorVariableTagInject />
+  </PromptEditor>
+</template>

package/src/components/prompt-editor-with-variables/types.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type PromptEditorPropsType } from '@/components/prompt-editor';
+
+export type PromptEditorWithVariablesProps = PromptEditorPropsType;

package/src/components/sql-editor-with-variables/index.ts

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as SQLEditorWithVariables } from './sql-editor-with-variables.vue';
+export type { SQLEditorWithVariablesProps } from './types';

package/src/components/sql-editor-with-variables/sql-editor-with-variables.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { I18n } from '@flowgram-vue/i18n';
+
+import { EditorVariableTree, EditorVariableTagInject } from '@/components/coze-editor-extensions';
+import { SQLCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+import type { SQLEditorWithVariablesProps } from './types';
+
+defineProps<SQLEditorWithVariablesProps>();
+</script>
+
+<template>
+  <SQLCodeEditor
+    :active-line-placeholder="activeLinePlaceholder || I18n.t(`Press '@' to Select variable`)"
+    v-bind="$props"
+  >
+    <EditorVariableTree />
+    <EditorVariableTagInject />
+  </SQLCodeEditor>
+</template>

package/src/components/sql-editor-with-variables/types.ts

@@ -0,0 +1,8 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type CodeEditorPropsType } from '@/components/code-editor';
+
+export type SQLEditorWithVariablesProps = Omit<CodeEditorPropsType, 'languageId'>;

package/src/components/type-selector/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import TypeSelector from './type-selector.vue';
+import { createInjectMaterial } from '@/shared/inject-material';
+
+export { default as TypeSelector } from './type-selector.vue';
+export const InjectTypeSelector = createInjectMaterial(TypeSelector);
+export { getTypeSelectValue, parseTypeSelectValue, type TypeSelectorProps } from './types';

package/src/components/type-selector/type-selector.vue

@@ -0,0 +1,79 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, h, type PropType, type CSSProperties } from 'vue';
+import { IJsonSchema, useTypeManager, JsonSchemaTypeManager } from '@flowgram-vue/json-schema';
+
+import { FgCascader, FgIconButton, type FgCascaderOption } from '@/ui';
+
+import { getTypeSelectValue, parseTypeSelectValue } from './types';
+
+const TypeSelectorImpl = defineComponent({
+  name: 'TypeSelector',
+  props: {
+    value: { type: Object as PropType<Partial<IJsonSchema>> },
+    readonly: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    style: { type: Object as PropType<CSSProperties> },
+    onChange: { type: Function as PropType<(value?: Partial<IJsonSchema>) => void> },
+  },
+  setup(props) {
+    const selectValue = computed(() => getTypeSelectValue(props.value));
+    const typeManager = useTypeManager() as JsonSchemaTypeManager;
+    const icon = computed(() => typeManager.getDisplayIcon(props.value || {}));
+    const isDisabled = computed(() => props.readonly || props.disabled);
+
+    const options = computed<FgCascaderOption[]>(() =>
+      typeManager.getTypeRegistriesWithParentType().map((_type) => {
+        const isArray = _type.type === 'array';
+        return {
+          label: h('div', { style: { display: 'flex', alignItems: 'center', gap: '5px' } }, [
+            _type.icon,
+            typeManager.getTypeBySchema(_type)?.label || _type.type,
+          ]),
+          value: _type.type,
+          children: isArray
+            ? typeManager.getTypeRegistriesWithParentType('array').map((childType) => ({
+                label: h('div', { style: { display: 'flex', alignItems: 'center', gap: '5px' } }, [
+                  typeManager.getDisplayIcon({
+                    type: 'array',
+                    items: { type: childType.type },
+                  }),
+                  typeManager.getTypeBySchema(childType)?.label || childType.type,
+                ]),
+                value: childType.type,
+              }))
+            : [],
+        };
+      })
+    );
+
+    return () =>
+      h(FgCascader, {
+        disabled: isDisabled.value,
+        options: options.value,
+        value: selectValue.value,
+        triggerRender: () =>
+          h(FgIconButton, {
+            disabled: isDisabled.value,
+            style: {
+              ...(isDisabled.value ? { pointerEvents: 'none' } : {}),
+              ...(props.style || {}),
+            },
+            icon: icon.value,
+          }),
+        onChange: (value: string[]) => {
+          props.onChange?.(parseTypeSelectValue(value));
+        },
+      });
+  },
+});
+
+(TypeSelectorImpl as typeof TypeSelectorImpl & { renderKey: string }).renderKey =
+  'type-selector-render-key';
+
+export default TypeSelectorImpl;
+</script>