@flowgram-vue/form-materials 0.2.0

package/src/components/dynamic-value-input/dynamic-value-input.vue

@@ -0,0 +1,145 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, type PropType, type CSSProperties } from 'vue';
+import {
+  JsonSchemaUtils,
+  IJsonSchema,
+  useTypeManager,
+  type JsonSchemaTypeManager,
+} from '@flowgram-vue/json-schema';
+
+import { IFlowConstantRefValue, IFlowConstantValue } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { TypeSelector } from '@/components/type-selector';
+import { ConstantInput, type ConstantInputStrategy } from '@/components/constant-input';
+import { FgIconButton, IconSetting } from '@/ui';
+
+import { useIncludeSchema, useRefVariable, useSelectSchema } from './hooks';
+import './styles.css';
+
+const DEFAULT_VALUE: IFlowConstantValue = {
+  type: 'constant',
+  content: '',
+  schema: { type: 'string' },
+};
+
+const DynamicValueInputImpl = defineComponent({
+  name: 'DynamicValueInput',
+  props: {
+    value: { type: Object as PropType<IFlowConstantRefValue> },
+    onChange: { type: Function as PropType<(value?: IFlowConstantRefValue) => void>, required: true },
+    readonly: { type: Boolean, default: false },
+    hasError: { type: Boolean, default: false },
+    style: { type: Object as PropType<CSSProperties> },
+    schema: { type: Object as PropType<IJsonSchema> },
+    constantProps: { type: Object as PropType<{ strategies?: ConstantInputStrategy[]; schema?: IJsonSchema; [key: string]: any }> },
+  },
+  setup(props) {
+    const refVariable = useRefVariable(props.value);
+    const [selectSchema, setSelectSchema] = useSelectSchema(
+      props.schema,
+      props.constantProps,
+      props.value
+    );
+    const includeSchema = useIncludeSchema(props.schema);
+    const typeManager = useTypeManager() as JsonSchemaTypeManager;
+
+    return () => {
+      const renderTypeSelector = () => {
+        if (props.schema) {
+          return h(TypeSelector, { value: props.schema, readonly: true });
+        }
+        if (props.value?.type === 'ref') {
+          const schema = refVariable.value?.type
+            ? JsonSchemaUtils.astToSchema(refVariable.value?.type)
+            : undefined;
+          return h(TypeSelector, { value: schema, readonly: true });
+        }
+        return h(TypeSelector, {
+          value: selectSchema.value,
+          readonly: props.readonly,
+          onChange: (_v) => {
+            setSelectSchema(_v || { type: 'string' });
+            const schema = _v || { type: 'string' };
+            let content = typeManager.getDefaultValue(schema);
+            if (_v?.type === 'object') {
+              content = '{}';
+            }
+            if (_v?.type === 'array') {
+              content = '[]';
+            }
+            props.onChange?.({
+              type: 'constant',
+              content,
+              schema,
+            });
+          },
+        });
+      };
+
+      const renderMain = () => {
+        if (props.value?.type === 'ref') {
+          return h(InjectVariableSelector, {
+            style: { width: '100%' },
+            value: props.value?.content,
+            includeSchema: includeSchema.value,
+            readonly: props.readonly,
+            onChange: (_v: string[] | undefined) =>
+              props.onChange?.(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE),
+          });
+        }
+
+        const constantSchema = props.schema || selectSchema.value || { type: 'string' };
+
+        return h(ConstantInput, {
+          value: props.value?.content,
+          schema: constantSchema,
+          readonly: props.readonly,
+          fallbackRenderer: defineComponent({
+            setup() {
+              return () =>
+                h(InjectVariableSelector, {
+                  style: { width: '100%' },
+                  includeSchema: includeSchema.value,
+                  readonly: props.readonly,
+                  onChange: (_v: string[] | undefined) =>
+                    props.onChange?.(_v ? { type: 'ref', content: _v } : DEFAULT_VALUE),
+                });
+            },
+          }),
+          ...(props.constantProps || {}),
+          strategies: [...(props.constantProps?.strategies || [])],
+          onChange: (_v: unknown) =>
+            props.onChange?.({ type: 'constant', content: _v, schema: constantSchema }),
+        });
+      };
+
+      const renderTrigger = () =>
+        h(InjectVariableSelector, {
+          style: { width: '100%' },
+          value: props.value?.type === 'ref' ? props.value?.content : undefined,
+          includeSchema: includeSchema.value,
+          readonly: props.readonly,
+          triggerRender: () =>
+            h(FgIconButton, { disabled: props.readonly, icon: IconSetting() }),
+          onChange: (_v: string[] | undefined) => props.onChange?.({ type: 'ref', content: _v }),
+        });
+
+      return h('div', { class: 'gedit-m-dynamic-value-input-container', style: props.style }, [
+        h('div', { class: 'gedit-m-dynamic-value-input-type' }, [renderTypeSelector()]),
+        h('div', { class: 'gedit-m-dynamic-value-input-main' }, [renderMain()]),
+        h('div', { class: 'gedit-m-dynamic-value-input-trigger' }, [renderTrigger()]),
+      ]);
+    };
+  },
+});
+
+(DynamicValueInputImpl as typeof DynamicValueInputImpl & { renderKey: string }).renderKey =
+  'dynamic-value-input-render-key';
+
+export default DynamicValueInputImpl;
+</script>

package/src/components/dynamic-value-input/hooks.ts

@@ -0,0 +1,71 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, ref, watch } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import { useScopeAvailable } from '@flowgram-vue/variable-core';
+
+import { IFlowConstantRefValue } from '@/shared';
+
+export function useRefVariable(value?: IFlowConstantRefValue) {
+  const available = useScopeAvailable();
+  return computed(() => {
+    if (value?.type === 'ref') {
+      return available.value.getByKeyPath(value.content);
+    }
+    return undefined;
+  });
+}
+
+export function useSelectSchema(
+  schemaFromProps?: IJsonSchema,
+  constantProps?: {
+    schema?: IJsonSchema;
+  },
+  value?: IFlowConstantRefValue
+) {
+  let defaultSelectSchema = schemaFromProps || constantProps?.schema || { type: 'string' };
+  if (value?.type === 'constant') {
+    defaultSelectSchema = value?.schema || defaultSelectSchema;
+  }
+
+  const changeVersion = ref(0);
+  const effectVersion = ref(0);
+  const selectSchema = ref(defaultSelectSchema);
+
+  watch(
+    () => value,
+    () => {
+      effectVersion.value += 1;
+      if (changeVersion.value === effectVersion.value) {
+        return;
+      }
+      effectVersion.value = changeVersion.value;
+
+      if (value?.type === 'constant' && value?.schema) {
+        selectSchema.value = value?.schema;
+      }
+    }
+  );
+
+  const setSelectSchemaWithVersionUpdate = (schema: IJsonSchema) => {
+    selectSchema.value = schema;
+    changeVersion.value += 1;
+  };
+
+  return [selectSchema, setSelectSchemaWithVersionUpdate] as const;
+}
+
+export function useIncludeSchema(schemaFromProps?: IJsonSchema) {
+  return computed(() => {
+    if (!schemaFromProps) {
+      return;
+    }
+    if (schemaFromProps?.type === 'number') {
+      return [schemaFromProps, { type: 'integer' }];
+    }
+    return { ...schemaFromProps, extra: { weak: true, ...schemaFromProps?.extra } };
+  });
+}

package/src/components/dynamic-value-input/index.ts

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import DynamicValueInput from './dynamic-value-input.vue';
+import { createInjectMaterial } from '@/shared';
+
+export { default as DynamicValueInput } from './dynamic-value-input.vue';
+export const InjectDynamicValueInput = createInjectMaterial(DynamicValueInput);

package/src/components/dynamic-value-input/styles.css

@@ -0,0 +1,59 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-dynamic-value-input-container {
+  display: flex;
+  align-items: center;
+  border-radius: 4px;
+  border: 1px solid var(--semi-color-border);
+  line-height: normal;
+  overflow: hidden;
+  background-color: var(--semi-color-fill-0);
+}
+
+.gedit-m-dynamic-value-input-main {
+  flex-grow: 1;
+  overflow: hidden;
+  min-width: 0;
+  border-left: 1px solid var(--semi-color-border);
+  border-right: 1px solid var(--semi-color-border);
+
+  & .semi-tree-select,
+  & .semi-input-number,
+  & .semi-select {
+    width: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-textarea-wrapper {
+    border: none;
+    border-radius: 0;
+  }
+
+  & .semi-input-textarea {
+    padding: 2px 6px;
+    border: none;
+    border-radius: 0;
+    word-break: break-all;
+  }
+}
+
+.gedit-m-dynamic-value-input-type {
+  & .semi-button {
+    border-radius: 0;
+  }
+}
+
+.gedit-m-dynamic-value-input-trigger {
+  & .semi-button {
+    border-radius: 0;
+  }
+}

package/src/components/index.ts

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { AssignRow, type AssignValueType } from './assign-row';
+export { AssignRows } from './assign-rows';
+export { BatchOutputs } from './batch-outputs';
+export { BatchVariableSelector } from './batch-variable-selector';
+export { BlurInput } from './blur-input';
+export {
+  BaseCodeEditor,
+  CodeEditor,
+  JsonCodeEditor,
+  PythonCodeEditor,
+  SQLCodeEditor,
+  ShellCodeEditor,
+  TypeScriptCodeEditor,
+  type CodeEditorPropsType,
+} from './code-editor';
+export { CodeEditorMini } from './code-editor-mini';
+export {
+  ConditionPresetOp,
+  ConditionProvider,
+  type ConditionOpConfig,
+  type ConditionOpConfigs,
+  type IConditionRule,
+  type IConditionRuleFactory,
+  useCondition,
+  useConditionContext,
+} from './condition-context';
+export { ConditionRow, type ConditionRowValueType } from './condition-row';
+export { ConstantInput, type ConstantInputStrategy } from './constant-input';
+export {
+  EditorInputsTree,
+  EditorVariableTagInject,
+  EditorVariableTree,
+} from './coze-editor-extensions';
+export {
+  DBConditionRow,
+  type DBConditionOptionType,
+  type DBConditionRowValueType,
+} from './db-condition-row';
+export { DisplayFlowValue } from './display-flow-value';
+export { DisplayInputsValueAllInTag, DisplayInputsValues } from './display-inputs-values';
+export { DisplayOutputs } from './display-outputs';
+export { DisplaySchemaTag } from './display-schema-tag';
+export { DisplaySchemaTree } from './display-schema-tree';
+export { DynamicValueInput, InjectDynamicValueInput } from './dynamic-value-input';
+export { InputsValues } from './inputs-values';
+export { InputsValuesTree } from './inputs-values-tree';
+export {
+  JsonEditorWithVariables,
+  type JsonEditorWithVariablesProps,
+} from './json-editor-with-variables';
+export { JsonSchemaCreator, type JsonSchemaCreatorProps } from './json-schema-creator';
+export { JsonSchemaEditor } from './json-schema-editor';
+export { PromptEditor, type PromptEditorPropsType } from './prompt-editor';
+export {
+  PromptEditorWithInputs,
+  type PromptEditorWithInputsProps,
+} from './prompt-editor-with-inputs';
+export {
+  PromptEditorWithVariables,
+  type PromptEditorWithVariablesProps,
+} from './prompt-editor-with-variables';
+export {
+  SQLEditorWithVariables,
+  type SQLEditorWithVariablesProps,
+} from './sql-editor-with-variables';
+export {
+  InjectTypeSelector,
+  TypeSelector,
+  getTypeSelectValue,
+  parseTypeSelectValue,
+  type TypeSelectorProps,
+} from './type-selector';
+export {
+  InjectVariableSelector,
+  VariableSelector,
+  VariableSelectorProvider,
+  useVariableTree,
+  type VariableSelectorProps,
+} from './variable-selector';

package/src/components/inputs-values/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as InputsValues } from './inputs-values.vue';

package/src/components/inputs-values/inputs-values.vue

@@ -0,0 +1,67 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { I18n } from '@flowgram-vue/i18n';
+
+import { type IFlowConstantRefValue, type IFlowValue } from '@/shared';
+import { useObjectList } from '@/hooks';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
+import { FgButton, FgIconButton, IconDelete, IconPlus } from '@/ui';
+
+import type { PropsType } from './types';
+import './styles.css';
+
+const props = defineProps<PropsType>();
+
+const { list, updateKey, updateValue, remove, add } = useObjectList<IFlowValue | undefined>({
+  value: props.value,
+  onChange: props.onChange,
+  sortIndexKey: 'extra.index',
+});
+</script>
+
+<template>
+  <div>
+    <div class="gedit-m-inputs-values-rows" :style="style">
+      <div v-for="item in list" :key="item.id" class="gedit-m-inputs-values-row">
+        <BlurInput
+          :style="{ width: '100px', minWidth: '100px', maxWidth: '100px' }"
+          :disabled="readonly"
+          :value="item.key"
+          :placeholder="I18n.t('Input Key')"
+          @change="(v) => updateKey(item.id, v)"
+        />
+        <InjectDynamicValueInput
+          :style="{ flexGrow: 1 }"
+          :readonly="readonly"
+          :value="item.value as IFlowConstantRefValue"
+          :schema="schema"
+          :has-error="hasError"
+          :constant-props="{
+            ...constantProps,
+            strategies: [...(constantProps?.strategies || [])],
+          }"
+          :on-change="(v) => updateValue(item.id, v)"
+        />
+        <FgIconButton :disabled="readonly" :icon="IconDelete()" @click="remove(item.id)" />
+      </div>
+    </div>
+    <FgButton
+      :disabled="readonly"
+      @click="
+        add({
+          type: 'constant',
+          content: '',
+          schema: { type: 'string' },
+        })
+      "
+    >
+      <IconPlus />
+      {{ I18n.t('Add') }}
+    </FgButton>
+  </div>
+</template>

package/src/components/inputs-values/styles.css

@@ -0,0 +1,17 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-inputs-values-rows {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.gedit-m-inputs-values-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+}

package/src/components/inputs-values/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import type { CSSProperties } from 'vue';
+
+import { IFlowValue } from '@/shared';
+import { ConstantInputStrategy } from '@/components/constant-input';
+
+export interface PropsType {
+  value?: Record<string, IFlowValue | undefined>;
+  onChange: (value?: Record<string, IFlowValue | undefined>) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  schema?: IJsonSchema;
+  style?: CSSProperties;
+  constantProps?: {
+    strategies?: ConstantInputStrategy[];
+    [key: string]: any;
+  };
+}

package/src/components/inputs-values-tree/hooks/use-child-list.ts

@@ -0,0 +1,65 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, type ComputedRef } from 'vue';
+import { isPlainObject } from 'lodash-es';
+
+import { FlowValueUtils } from '@/shared';
+import { useObjectList } from '@/hooks';
+
+export function useChildList(
+  value?: any,
+  onChange?: (value: any) => void
+): {
+  canAddField: ComputedRef<boolean>;
+  hasChildren: ComputedRef<boolean>;
+  list: ReturnType<typeof useObjectList<any>>['list'];
+  add: (defaultValue?: any) => void;
+  updateKey: (id: string, key: string) => void;
+  updateValue: (id: string, value: any) => void;
+  remove: (id: string) => void;
+} {
+  const canAddField = computed(() => {
+    if (!isPlainObject(value)) {
+      return false;
+    }
+    if (FlowValueUtils.isFlowValue(value)) {
+      return FlowValueUtils.isConstant(value) && value?.schema?.type === 'object';
+    }
+    return true;
+  });
+
+  const objectListValue = computed(() => {
+    if (isPlainObject(value)) {
+      if (FlowValueUtils.isFlowValue(value)) {
+        return undefined;
+      }
+      return value;
+    }
+    return undefined;
+  });
+
+  const { list, add, updateKey, updateValue, remove } = useObjectList<any>({
+    value: objectListValue.value,
+    onChange: (next) => {
+      onChange?.(next);
+    },
+    sortIndexKey: (item) => (FlowValueUtils.isFlowValue(item) ? 'extra.index' : ''),
+  });
+
+  const hasChildren = computed(
+    () => canAddField.value && (list.value.length > 0 || Object.keys(objectListValue.value || {}).length > 0)
+  );
+
+  return {
+    canAddField,
+    hasChildren,
+    list,
+    add,
+    updateKey,
+    updateValue,
+    remove,
+  };
+}

package/src/components/inputs-values-tree/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as InputsValuesTree } from './inputs-values-tree.vue';

package/src/components/inputs-values-tree/inputs-values-tree.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FlowValueUtils, type IFlowValue, type IInputsValues } from '@/shared';
+import { useObjectList } from '@/hooks';
+import { FgButton, IconPlus } from '@/ui';
+
+import type { PropsType } from './types';
+import InputValueRow from './row.vue';
+import './styles.css';
+
+const props = defineProps<PropsType>();
+
+const { list, updateKey, updateValue, remove, add } = useObjectList<
+  IInputsValues | IFlowValue | undefined
+>({
+  value: props.value,
+  onChange: (v) => props.onChange?.(v as IInputsValues),
+  sortIndexKey: (item) => (FlowValueUtils.isFlowValue(item) ? 'extra.index' : ''),
+});
+</script>
+
+<template>
+  <div>
+    <div class="gedit-m-inputs-values-tree-tree-items">
+      <InputValueRow
+        v-for="item in list"
+        :key="item.id"
+        :key-name="item.key"
+        :value="item.value"
+        :readonly="readonly"
+        :has-error="hasError"
+        :constant-props="constantProps"
+        :on-update-key="(key) => updateKey(item.id, key)"
+        :on-update-value="(value) => updateValue(item.id, value)"
+        :on-remove="() => remove(item.id)"
+      />
+    </div>
+    <FgButton
+      :style="{ marginTop: '10px', marginLeft: '16px' }"
+      :disabled="readonly"
+      @click="
+        add({
+          type: 'constant',
+          content: '',
+          schema: { type: 'string' },
+        })
+      "
+    >
+      <IconPlus />
+      {{ I18n.t('Add') }}
+    </FgButton>
+  </div>
+</template>