@flowgram-vue/form-materials 0.2.0

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+export default { name: 'InputValueRow' };
+</script>
+
+<script setup lang="ts">
+import { computed, defineComponent, h, ref } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { IFlowConstantValue } from '@/shared';
+import { ConstantInputStrategy } from '@/components/constant-input';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
+import { FgIconButton, FgInput, IconAddChildren, IconChevronDown, IconChevronRight, IconDelete } from '@/ui';
+
+import type { PropsType } from './types';
+import { useChildList } from './hooks/use-child-list';
+import './styles.css';
+
+const AddObjectChildStrategy: ConstantInputStrategy = {
+  hit: (schema) => schema.type === 'object',
+  Renderer: defineComponent({
+    name: 'AddObjectChildStrategy',
+    setup() {
+      return () =>
+        h(FgInput, {
+          disabled: true,
+          style: { pointerEvents: 'none' },
+          value: I18n.t('Configure via child fields'),
+        });
+    },
+  }),
+};
+
+const props = defineProps<
+  {
+    keyName?: string;
+    value?: any;
+    onUpdateKey: (key: string) => void;
+    onUpdateValue: (value: any) => void;
+    onRemove?: () => void;
+    $isLast?: boolean;
+    $level?: number;
+  } & Pick<PropsType, 'constantProps' | 'hasError' | 'readonly'>
+>();
+
+const collapse = ref(false);
+const { canAddField, hasChildren, list, add, updateKey, updateValue, remove } = useChildList(
+  props.value,
+  props.onUpdateValue
+);
+
+const strategies = computed(() => [
+  ...(hasChildren.value ? [AddObjectChildStrategy] : []),
+  ...(props.constantProps?.strategies || []),
+]);
+
+const flowDisplayValue = computed(() =>
+  hasChildren.value
+    ? ({
+        type: 'constant',
+        schema: { type: 'object' },
+      } as IFlowConstantValue)
+    : props.value
+);
+</script>
+
+<template>
+  <div
+    :class="`gedit-m-inputs-values-tree-tree-item-left ${($level || 0) > 0 ? 'show-line' : ''} ${
+      $isLast ? 'is-last' : ''
+    } ${hasChildren ? 'show-collapse' : ''}`"
+  >
+    <div
+      v-if="hasChildren"
+      class="gedit-m-inputs-values-tree-collapse-trigger"
+      @click="collapse = !collapse"
+    >
+      <IconChevronDown v-if="collapse" />
+      <IconChevronRight v-else />
+    </div>
+  </div>
+  <div class="gedit-m-inputs-values-tree-tree-item-right">
+    <div class="gedit-m-inputs-values-tree-tree-item-main">
+      <div class="gedit-m-inputs-values-tree-row">
+        <BlurInput
+          :style="{ width: '100px', minWidth: '100px', maxWidth: '100px' }"
+          :disabled="readonly"
+          :value="keyName"
+          :placeholder="I18n.t('Input Key')"
+          @change="(v) => onUpdateKey?.(v)"
+        />
+        <InjectDynamicValueInput
+          :style="{ flexGrow: 1 }"
+          :readonly="readonly"
+          :value="flowDisplayValue"
+          :has-error="hasError"
+          :constant-props="{ ...constantProps, strategies }"
+          :on-change="(v) => onUpdateValue(v)"
+        />
+        <div class="gedit-m-inputs-values-tree-actions">
+          <FgIconButton
+            v-if="canAddField"
+            :disabled="readonly"
+            :icon="IconAddChildren()"
+            @click="
+              () => {
+                add({ type: 'constant', content: '', schema: { type: 'string' } });
+                collapse = true;
+              }
+            "
+          />
+          <FgIconButton :disabled="readonly" :icon="IconDelete()" @click="onRemove?.()" />
+        </div>
+      </div>
+    </div>
+    <div v-if="hasChildren" :class="`gedit-m-inputs-values-tree-collapsible ${collapse ? 'collapse' : ''}`">
+      <div class="gedit-m-inputs-values-tree-tree-items shrink">
+        <InputValueRow
+          v-for="(_item, index) in list"
+          :key="_item.id"
+          :readonly="readonly"
+          :has-error="hasError"
+          :constant-props="constantProps"
+          :key-name="_item.key"
+          :value="_item.value"
+          :$level="($level || 0) + 1"
+          :$is-last="index === list.length - 1"
+          :on-update-value="(_v) => updateValue(_item.id, _v)"
+          :on-update-key="(k) => updateKey(_item.id, k)"
+          :on-remove="() => remove(_item.id)"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,94 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-inputs-values-tree-container {
+}
+
+.gedit-m-inputs-values-tree-row {
+  display: flex;
+  align-items: flex-start;
+  gap: 5px;
+}
+
+.gedit-m-inputs-values-tree-collapse-trigger {
+  cursor: pointer;
+  margin-right: 5px;
+}
+
+.gedit-m-inputs-values-tree-tree-items {
+  display: grid;
+  grid-template-columns: auto 1fr;
+}
+
+.gedit-m-inputs-values-tree-tree-items.shrink {
+  padding-left: 3px;
+  margin-top: 10px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left {
+  grid-column: 1;
+  position: relative;
+  width: 16px;
+}
+
+.gedit-m-inputs-values-tree-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-inputs-values-tree-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-inputs-values-tree-tree-item-left.show-line.is-last::before {
+  height: 24px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-left.show-line.show-collapse::after {
+  width: 12px;
+}
+
+.gedit-m-inputs-values-tree-tree-item-right {
+  grid-column: 2;
+  margin-bottom: 10px;
+
+  &:last-child {
+    margin-bottom: 0px;
+  }
+}
+
+.gedit-m-inputs-values-tree-tree-item-main {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  position: relative;
+}
+
+.gedit-m-inputs-values-tree-collapsible {
+  display: none;
+}
+
+.gedit-m-inputs-values-tree-collapsible.collapse {
+  display: block;
+}
+
+.gedit-m-inputs-values-tree-actions {
+  white-space: nowrap;
+}

package/src/components/inputs-values-tree/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 { IInputsValues } from '@/shared';
+import { ConstantInputStrategy } from '@/components/constant-input';
+
+export interface PropsType {
+  value?: IInputsValues;
+  onChange: (value?: IInputsValues) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  schema?: IJsonSchema;
+  style?: CSSProperties;
+  constantProps?: {
+    strategies?: ConstantInputStrategy[];
+    [key: string]: any;
+  };
+}

package/src/components/json-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 JsonEditorWithVariables } from './json-editor-with-variables.vue';
+export type { JsonEditorWithVariablesProps } from './types';

package/src/components/json-editor-with-variables/json-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 { JsonCodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+import type { JsonEditorWithVariablesProps } from './types';
+
+defineProps<JsonEditorWithVariablesProps>();
+</script>
+
+<template>
+  <JsonCodeEditor
+    :active-line-placeholder="activeLinePlaceholder || I18n.t(`Press '@' to Select variable`)"
+    v-bind="$props"
+  >
+    <EditorVariableTree :trigger-characters="['@']" />
+    <EditorVariableTagInject />
+  </JsonCodeEditor>
+</template>

package/src/components/json-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 JsonEditorWithVariablesProps = Omit<CodeEditorPropsType, 'languageId'>;

package/src/components/json-schema-creator/index.ts

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

package/src/components/json-schema-creator/json-input-modal.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ref } from 'vue';
+import type { IJsonSchema } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgModal } from '@/ui';
+import { JsonCodeEditor } from '@/components/code-editor';
+import { jsonToSchema } from './utils/json-to-schema';
+
+const props = defineProps<{
+  visible?: boolean;
+  onClose: () => void;
+  onConfirm: (schema: IJsonSchema) => void;
+}>();
+
+const jsonInput = ref('');
+const error = ref('');
+
+const handleConfirm = () => {
+  try {
+    const schema = jsonToSchema(jsonInput.value);
+    props.onConfirm(schema);
+    jsonInput.value = '';
+    error.value = '';
+  } catch (err) {
+    error.value = (err as Error).message;
+  }
+};
+</script>
+
+<template>
+  <FgModal
+    :visible="visible"
+    :title="I18n.t('JSON to JSONSchema')"
+    :ok-text="I18n.t('Generate')"
+    :cancel-text="I18n.t('Cancel')"
+    @close="onClose"
+    @confirm="handleConfirm"
+  >
+    <div style="margin-bottom: 8px">{{ I18n.t('Paste JSON data') }}：</div>
+    <div style="min-height: 300px">
+      <JsonCodeEditor :value="jsonInput" :on-change="(value) => (jsonInput = value || '')" />
+    </div>
+    <div v-if="error" style="margin-top: 8px; color: #f93920">{{ error }}</div>
+  </FgModal>
+</template>

package/src/components/json-schema-creator/json-schema-creator.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ref } from 'vue';
+import type { IJsonSchema } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgButton } from '@/ui';
+import JsonInputModal from './json-input-modal.vue';
+import type { JsonSchemaCreatorProps } from './types';
+
+const props = defineProps<JsonSchemaCreatorProps>();
+const visible = ref(false);
+
+const handleCreate = (schema: IJsonSchema) => {
+  props.onSchemaCreate?.(schema);
+  visible.value = false;
+};
+</script>
+
+<template>
+  <FgButton @click="visible = true">{{ I18n.t('JSON to JSONSchema') }}</FgButton>
+  <JsonInputModal :visible="visible" :on-close="() => (visible = false)" :on-confirm="handleCreate" />
+</template>

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IJsonSchema } from '@flowgram-vue/json-schema';
+
+export interface JsonSchemaCreatorProps {
+  onSchemaCreate?: (schema: IJsonSchema) => void;
+}

package/src/components/json-schema-creator/utils/json-to-schema.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IJsonSchema } from '@flowgram-vue/json-schema';
+
+export function jsonToSchema(jsonString: string): IJsonSchema {
+  // 1. 解析 JSON
+  const data = JSON.parse(jsonString); // 会自动抛出语法错误
+
+  // 2. 生成 schema
+  return generateSchema(data);
+}
+
+function generateSchema(value: any): IJsonSchema {
+  // null
+  if (value === null) {
+    return { type: 'string' };
+  }
+
+  // array
+  if (Array.isArray(value)) {
+    const schema: IJsonSchema = { type: 'array' };
+    if (value.length > 0) {
+      schema.items = generateSchema(value[0]);
+    }
+    return schema;
+  }
+
+  // object
+  if (typeof value === 'object') {
+    const schema: IJsonSchema = {
+      type: 'object',
+      properties: {},
+      required: [],
+    };
+
+    for (const [key, val] of Object.entries(value)) {
+      schema.properties![key] = generateSchema(val);
+      schema.required!.push(key);
+    }
+
+    return schema;
+  }
+
+  // primitive types
+  const type = typeof value;
+  return { type: type as any };
+}

package/src/components/json-schema-editor/default-value.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { ConstantInput } from '@/components/constant-input';
+
+defineProps<{
+  value?: unknown;
+  schema?: IJsonSchema;
+  placeholder?: string;
+  onChange: (value: unknown) => void;
+}>();
+</script>
+
+<template>
+  <div class="gedit-m-json-schema-editor-constant-input-wrapper">
+    <ConstantInput
+      :value="value"
+      :schema="schema || { type: 'string' }"
+      :placeholder="placeholder ?? I18n.t('Default value if parameter is not provided')"
+      enable-multi-line-str
+      :on-change="onChange"
+    />
+  </div>
+</template>

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

@@ -0,0 +1,134 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, ref, watch } from 'vue';
+import { difference, omit } from 'lodash-es';
+import { produce } from 'immer';
+import { IJsonSchema, type JsonSchemaTypeManager, useTypeManager } from '@flowgram-vue/json-schema';
+
+import { PropertyValueType } from './types';
+
+let _id = 0;
+function genId() {
+  return _id++;
+}
+
+export function usePropertiesEdit(
+  value?: PropertyValueType,
+  onChange?: (value: PropertyValueType) => void
+) {
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+  const drilldownSchema = computed(() => typeManager.getPropertiesParent(value || {}));
+  const canAddField = computed(() => typeManager.canAddField(value || {}));
+  const propertyList = ref<PropertyValueType[]>([]);
+  const latestPropertyListRef = ref(propertyList.value);
+  const effectVersion = ref(0);
+  const changeVersion = ref(0);
+
+  watch(
+    drilldownSchema,
+    () => {
+      effectVersion.value = effectVersion.value + 1;
+      if (effectVersion.value === changeVersion.value) {
+        return;
+      }
+      effectVersion.value = changeVersion.value;
+
+      const _list = latestPropertyListRef.value;
+      const newNames = Object.entries(drilldownSchema.value?.properties || {})
+        .sort(([, a], [, b]) => (a.extra?.index ?? 0) - (b.extra?.index ?? 0))
+        .map(([key]) => key);
+
+      const oldNames = _list.map((item) => item.name).filter(Boolean) as string[];
+      const addNames = difference(newNames, oldNames);
+
+      const next = _list
+        .filter((item) => !item.name || newNames.includes(item.name))
+        .map((item) => ({
+          key: item.key,
+          name: item.name,
+          isPropertyRequired: drilldownSchema.value?.required?.includes(item.name || '') || false,
+          ...(drilldownSchema.value?.properties?.[item.name || ''] || item || {}),
+        }))
+        .concat(
+          addNames.map((_name) => ({
+            key: genId(),
+            name: _name,
+            isPropertyRequired: drilldownSchema.value?.required?.includes(_name) || false,
+            ...(drilldownSchema.value?.properties?.[_name] || {}),
+          }))
+        );
+
+      latestPropertyListRef.value = next;
+      propertyList.value = next;
+    },
+    { immediate: true }
+  );
+
+  const updatePropertyList = (updater: (list: PropertyValueType[]) => PropertyValueType[]) => {
+    changeVersion.value = changeVersion.value + 1;
+    const next = updater(latestPropertyListRef.value);
+    latestPropertyListRef.value = next;
+    propertyList.value = next;
+
+    const nextProperties: Record<string, IJsonSchema> = {};
+    const nextRequired: string[] = [];
+
+    for (const _property of next) {
+      if (!_property.name) {
+        continue;
+      }
+      nextProperties[_property.name] = omit(_property, ['key', 'name', 'isPropertyRequired']);
+      if (_property.isPropertyRequired) {
+        nextRequired.push(_property.name);
+      }
+    }
+
+    onChange?.(
+      produce(value || {}, (draft) => {
+        const propertiesParent = typeManager.getPropertiesParent(draft);
+        if (propertiesParent) {
+          propertiesParent.properties = nextProperties;
+          propertiesParent.required = nextRequired;
+        }
+      })
+    );
+  };
+
+  const onAddProperty = () => {
+    const _list = latestPropertyListRef.value;
+    const next = [
+      ..._list,
+      { key: genId(), name: '', type: 'string', extra: { index: _list.length + 1 } },
+    ];
+    latestPropertyListRef.value = next;
+    propertyList.value = next;
+  };
+
+  const onRemoveProperty = (key: number) => {
+    updatePropertyList((_list) => _list.filter((_property) => _property.key !== key));
+  };
+
+  const onEditProperty = (key: number, nextValue: PropertyValueType) => {
+    updatePropertyList((_list) =>
+      _list.map((_property) => (_property.key === key ? nextValue : _property))
+    );
+  };
+
+  watch(canAddField, (next) => {
+    if (!next) {
+      latestPropertyListRef.value = [];
+      propertyList.value = [];
+    }
+  });
+
+  return {
+    propertyList,
+    canAddField,
+    onAddProperty,
+    onRemoveProperty,
+    onEditProperty,
+  };
+}

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

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

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

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgButton, IconPlus } from '@/ui';
+
+import type { ConfigType } from './types';
+import { usePropertiesEdit } from './hooks';
+import PropertyEdit from './property-edit.vue';
+import './styles.css';
+
+const DEFAULT = { type: 'object' };
+
+const props = defineProps<{
+  value?: IJsonSchema;
+  onChange?: (value: IJsonSchema) => void;
+  config?: ConfigType;
+  className?: string;
+  readonly?: boolean;
+}>();
+
+const schemaValue = computed(() => props.value || DEFAULT);
+const { propertyList, onAddProperty, onRemoveProperty, onEditProperty } = usePropertiesEdit(
+  schemaValue.value,
+  props.onChange
+);
+</script>
+
+<template>
+  <div class="gedit-m-json-schema-editor-container">
+    <div class="gedit-m-json-schema-editor-tree-items">
+      <PropertyEdit
+        v-for="_property in propertyList"
+        :key="_property.key"
+        :readonly="readonly"
+        :value="_property"
+        :config="config"
+        :on-change="(_v) => onEditProperty(_property.key!, _v)"
+        :on-remove="() => onRemoveProperty(_property.key!)"
+      />
+    </div>
+    <FgButton :disabled="readonly" :style="{ marginTop: '10px', marginLeft: '16px' }" @click="onAddProperty">
+      <IconPlus />
+      {{ config?.addButtonText ?? I18n.t('Add') }}
+    </FgButton>
+  </div>
+</template>