@flowgram-vue/form-materials 0.2.0

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

@@ -0,0 +1,33 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+export interface TypeSelectorProps {
+  value?: Partial<IJsonSchema>;
+  onChange?: (value?: Partial<IJsonSchema>) => void;
+  readonly?: boolean;
+  disabled?: boolean;
+  style?: CSSProperties;
+}
+
+export const getTypeSelectValue = (value?: Partial<IJsonSchema>): string[] | undefined => {
+  if (value?.type === 'array' && value?.items) {
+    return [value.type, ...(getTypeSelectValue(value.items) || [])];
+  }
+
+  return value?.type ? [value.type] : undefined;
+};
+
+export const parseTypeSelectValue = (value?: string[]): Partial<IJsonSchema> | undefined => {
+  const [type, ...subTypes] = value || [];
+
+  if (type === 'array') {
+    return { type: 'array', items: parseTypeSelectValue(subTypes) };
+  }
+
+  return { type };
+};

package/src/components/variable-selector/context.ts

@@ -0,0 +1,44 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, inject, provide, type InjectionKey, type PropType, type VNode } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import { BaseVariableField } from '@flowgram-vue/variable-core';
+
+type VariableField = BaseVariableField<{
+  icon?: string | VNode;
+  title?: string;
+  disabled?: boolean;
+}>;
+
+export interface VariableSelectorContextValue {
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+  skipVariable?: (variable: VariableField) => boolean;
+}
+
+const VariableSelectorContextKey: InjectionKey<VariableSelectorContextValue> =
+  Symbol('VariableSelectorContext');
+
+export const useVariableSelectorContext = () =>
+  inject(VariableSelectorContextKey, {} as VariableSelectorContextValue);
+
+export const VariableSelectorProvider = defineComponent({
+  name: 'VariableSelectorProvider',
+  props: {
+    skipVariable: { type: Function as PropType<(variable?: BaseVariableField) => boolean> },
+    includeSchema: { type: [Object, Array] as PropType<IJsonSchema | IJsonSchema[]> },
+    excludeSchema: { type: [Object, Array] as PropType<IJsonSchema | IJsonSchema[]> },
+  },
+  setup(props, { slots }) {
+    const context = computed(() => ({
+      skipVariable: props.skipVariable,
+      includeSchema: props.includeSchema,
+      excludeSchema: props.excludeSchema,
+    }));
+    provide(VariableSelectorContextKey, context as unknown as VariableSelectorContextValue);
+    return () => slots.default?.();
+  },
+});

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import VariableSelector from './variable-selector.vue';
+import { createInjectMaterial } from '@/shared';
+
+export { default as VariableSelector } from './variable-selector.vue';
+export const InjectVariableSelector = createInjectMaterial(VariableSelector);
+export { VariableSelectorProvider, useVariableSelectorContext } from './context';
+export { useVariableTree } from './use-variable-tree';
+export type { VariableSelectorProps } from './types';

package/src/components/variable-selector/styles.css

@@ -0,0 +1,70 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-variable-selector-root-title {
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+
+.gedit-m-variable-selector-var-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &.in-selector {
+    min-width: 50%;
+  }
+}
+
+.gedit-m-variable-selector-tag {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin: 0;
+  height: 22px;
+
+  .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+}
+
+.gedit-m-variable-selector-tree-select {
+  outline: none;
+
+  &.error {
+    outline: 1px solid red;
+  }
+
+  .semi-tree-select-selection {
+    padding: 0px;
+    height: 22px;
+  }
+
+  .semi-tree-select-selection-content {
+    width: 100%;
+  }
+
+  .semi-tree-select-selection-placeholder {
+    padding-left: 10px;
+  }
+}
+
+.gedit-m-variable-selector-tag-pop {
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  white-space: nowrap;
+}
+
+.gedit-m-variable-selector-dropdown {
+  max-height: 300px;
+  overflow: auto;
+}

package/src/components/variable-selector/types.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties, VNode } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+export interface VariableSelectorProps {
+  value?: string[];
+  config?: {
+    placeholder?: string;
+    notFoundContent?: string;
+  };
+  onChange: (value?: string[]) => void;
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: CSSProperties;
+  triggerRender?: () => VNode;
+}

package/src/components/variable-selector/use-variable-tree.ts

@@ -0,0 +1,108 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, h, type ComputedRef, type VNode } from 'vue';
+import {
+  IJsonSchema,
+  JsonSchemaTypeManager,
+  JsonSchemaUtils,
+  useTypeManager,
+} from '@flowgram-vue/json-schema';
+import { ASTMatch, BaseVariableField, useAvailableVariables } from '@flowgram-vue/variable-core';
+
+import type { FgTreeNode } from '@/ui';
+
+import { useVariableSelectorContext } from './context';
+
+type VariableField = BaseVariableField<{
+  icon?: string | VNode;
+  title?: string;
+  disabled?: boolean;
+}>;
+
+export function useVariableTree(params: {
+  includeSchema?: IJsonSchema | IJsonSchema[];
+  excludeSchema?: IJsonSchema | IJsonSchema[];
+  skipVariable?: (variable: VariableField) => boolean;
+}): ComputedRef<FgTreeNode[]> {
+  const context = useVariableSelectorContext();
+  const typeManager = useTypeManager() as JsonSchemaTypeManager;
+  const variables = useAvailableVariables();
+
+  const getVariableTypeIcon = (variable: VariableField) => {
+    if (variable.meta?.icon) {
+      if (typeof variable.meta.icon === 'string') {
+        return h('img', {
+          style: { marginRight: '8px' },
+          width: 12,
+          height: 12,
+          src: variable.meta.icon,
+        });
+      }
+      return variable.meta.icon;
+    }
+
+    const schema = JsonSchemaUtils.astToSchema(variable.type, { drilldownObject: false });
+    return typeManager.getDisplayIcon(schema || {});
+  };
+
+  return computed(() => {
+    const includeSchema = params.includeSchema ?? context.includeSchema;
+    const excludeSchema = params.excludeSchema ?? context.excludeSchema;
+    const skipVariable = params.skipVariable ?? context.skipVariable;
+
+    const renderVariable = (
+      variable: VariableField,
+      parentFields: VariableField[] = []
+    ): FgTreeNode | null => {
+      const type = variable?.type;
+
+      if (!type) {
+        return null;
+      }
+
+      let children: FgTreeNode[] | undefined;
+
+      if (ASTMatch.isObject(type)) {
+        children = (type.properties || [])
+          .map((_property) => renderVariable(_property as VariableField, [...parentFields, variable]))
+          .filter(Boolean) as FgTreeNode[];
+      }
+
+      const keyPath = [...parentFields.map((_field) => _field.key), variable.key];
+      const key = keyPath.join('.');
+
+      const isSchemaInclude = includeSchema
+        ? JsonSchemaUtils.isASTMatchSchema(type, includeSchema)
+        : true;
+      const isSchemaExclude = excludeSchema
+        ? JsonSchemaUtils.isASTMatchSchema(type, excludeSchema)
+        : false;
+      const isCustomSkip = skipVariable ? skipVariable(variable) : false;
+      const isMetaDisabled = variable.meta?.disabled;
+      const isSchemaMatch = isSchemaInclude && !isSchemaExclude && !isCustomSkip && !isMetaDisabled;
+
+      if (!isSchemaMatch && !children?.length) {
+        return null;
+      }
+
+      return {
+        key,
+        label: variable.meta?.title || variable.key,
+        value: key,
+        keyPath,
+        icon: getVariableTypeIcon(variable),
+        children,
+        disabled: !isSchemaMatch,
+        rootMeta: parentFields[0]?.meta || variable.meta,
+        isRoot: !parentFields?.length,
+      };
+    };
+
+    return [...variables.value.slice(0).reverse()]
+      .map((_variable) => renderVariable(_variable as VariableField))
+      .filter(Boolean) as FgTreeNode[];
+  });
+}

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

@@ -0,0 +1,139 @@
+<script lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, type PropType, type CSSProperties, type VNode } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { FgPopover, FgTag, FgTreeSelect, IconIssueStroked, type FgTreeNode } from '@/ui';
+
+import { useVariableTree } from './use-variable-tree';
+import { useVariableSelectorContext } from './context';
+
+import './styles.css';
+
+const VariableSelectorImpl = defineComponent({
+  name: 'VariableSelector',
+  props: {
+    value: { type: Array as unknown as PropType<string[]> },
+    config: { type: Object as PropType<{ placeholder?: string; notFoundContent?: string }> },
+    includeSchema: { type: [Object, Array] as PropType<IJsonSchema | IJsonSchema[]> },
+    excludeSchema: { type: [Object, Array] as PropType<IJsonSchema | IJsonSchema[]> },
+    readonly: { type: Boolean, default: false },
+    hasError: { type: Boolean, default: false },
+    style: { type: Object as PropType<CSSProperties> },
+    triggerRender: { type: Function as PropType<() => VNode> },
+  },
+  emits: ['change'],
+  setup(props, { emit }) {
+    const { skipVariable } = useVariableSelectorContext();
+    const treeData = useVariableTree({
+      get includeSchema() {
+        return props.includeSchema;
+      },
+      get excludeSchema() {
+        return props.excludeSchema;
+      },
+      skipVariable,
+    });
+
+    const treeValue = computed(() => {
+      if (typeof props.value === 'string') {
+        return props.value;
+      }
+      return props.value?.join('.');
+    });
+
+    const renderIcon = (icon?: VNode | string) => {
+      if (!icon) {
+        return undefined;
+      }
+      if (typeof icon === 'string') {
+        return h('img', { style: { marginRight: '8px' }, width: 12, height: 12, src: icon });
+      }
+      return icon;
+    };
+
+    return () =>
+      h(
+        FgTreeSelect,
+        {
+          class: `gedit-m-variable-selector-tree-select ${props.hasError ? 'error' : ''}`,
+          style: props.style,
+          disabled: props.readonly,
+          treeData: treeData.value,
+          value: treeValue.value,
+          error: props.hasError,
+          placeholder: props.config?.placeholder ?? I18n.t('Select Variable'),
+          triggerRender: props.triggerRender,
+          onChange: (_path: string[] | undefined, node?: FgTreeNode) => {
+            emit('change', node?.keyPath as string[] | undefined);
+          },
+        },
+        {
+          selected: ({ option }: { option?: FgTreeNode }) => {
+            if (!option?.keyPath) {
+              return h(
+                FgTag,
+                {
+                  class: 'gedit-m-variable-selector-tag',
+                  color: 'amber',
+                  closable: !props.readonly,
+                  prefixIcon: IconIssueStroked(),
+                  onClose: () => emit('change', undefined),
+                },
+                () => props.config?.notFoundContent ?? 'Undefined'
+              );
+            }
+
+            const rootIcon = renderIcon(option.rootMeta?.icon || option?.icon);
+            const rootTitle = option.rootMeta?.title
+              ? `${option.rootMeta?.title} ${option.isRoot ? '' : '-'} `
+              : null;
+
+            return h(FgPopover, {}, {
+              default: () =>
+                h(
+                  FgTag,
+                  {
+                    class: 'gedit-m-variable-selector-tag',
+                    prefixIcon: rootIcon,
+                    closable: !props.readonly,
+                    onClose: () => emit('change', undefined),
+                  },
+                  () => [
+                    h('div', { class: 'gedit-m-variable-selector-root-title' }, rootTitle),
+                    !option.isRoot
+                      ? h(
+                          'div',
+                          { class: 'gedit-m-variable-selector-var-name in-selector' },
+                          option.label
+                        )
+                      : null,
+                  ]
+                ),
+              content: () =>
+                h('div', { class: 'gedit-m-variable-selector-tag-pop' }, [
+                  rootIcon,
+                  h('div', { class: 'gedit-m-variable-selector-root-title' }, rootTitle),
+                  h(
+                    'div',
+                    { class: 'gedit-m-variable-selector-var-name' },
+                    option.keyPath.slice(1).join('.')
+                  ),
+                ]),
+            });
+          },
+        }
+      );
+  },
+});
+
+(VariableSelectorImpl as typeof VariableSelectorImpl & { renderKey: string }).renderKey =
+  'variable-selector-render-key';
+
+export default VariableSelectorImpl;
+</script>

package/src/effects/auto-rename-ref/index.ts

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { VariableFieldKeyRenameService } from '@flowgram-vue/variable-core';
+import { DataEvent, type Effect, type EffectOptions } from '@flowgram-vue/node';
+
+import { IFlowRefValue, IFlowTemplateValue } from '@/shared';
+import { FlowValueUtils } from '@/shared';
+
+/**
+ * Auto rename ref when form item's key is renamed
+ *
+ * Example:
+ *
+ * formMeta: {
+ *  effects: {
+ *    "inputsValues": autoRenameRefEffect,
+ *  }
+ * }
+ */
+export const autoRenameRefEffect: EffectOptions[] = [
+  {
+    event: DataEvent.onValueInit,
+    effect: ((params) => {
+      const { context, form, name } = params;
+
+      const renameService = context.node.getService(VariableFieldKeyRenameService);
+
+      const disposable = renameService.onRename(({ before, after }) => {
+        const beforeKeyPath = [
+          ...before.parentFields.map((_field) => _field.key).reverse(),
+          before.key,
+        ];
+        const afterKeyPath = [
+          ...after.parentFields.map((_field) => _field.key).reverse(),
+          after.key,
+        ];
+
+        // traverse rename refs inside form item 'name'
+        traverseRef(name, form.getValueIn(name), (_drilldownName, _v) => {
+          if (_v.type === 'ref') {
+            // ref auto rename
+            if (isKeyPathMatch(_v.content, beforeKeyPath)) {
+              _v.content = [...afterKeyPath, ...(_v.content || [])?.slice(beforeKeyPath.length)];
+              form.setValueIn(_drilldownName, _v);
+            }
+          } else if (_v.type === 'template') {
+            // template auto rename
+            const templateKeyPaths = FlowValueUtils.getTemplateKeyPaths(_v);
+            let hasMatch = false;
+
+            templateKeyPaths.forEach((_keyPath) => {
+              if (isKeyPathMatch(_keyPath, beforeKeyPath)) {
+                hasMatch = true;
+                const nextKeyPath = [
+                  ...afterKeyPath,
+                  ...(_keyPath || [])?.slice(beforeKeyPath.length),
+                ];
+                _v.content = _v.content?.replace(
+                  `{{${_keyPath.join('.')}}`,
+                  `{{${nextKeyPath.join('.')}}`
+                );
+              }
+            });
+
+            if (hasMatch) {
+              form.setValueIn(_drilldownName, { ..._v });
+            }
+          }
+        });
+      });
+
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];
+
+/**
+ * If ref value's keyPath is the under as targetKeyPath
+ * @param value
+ * @param targetKeyPath
+ * @returns
+ */
+function isKeyPathMatch(keyPath: string[] = [], targetKeyPath: string[]) {
+  return targetKeyPath.every((_key, index) => _key === keyPath[index]);
+}
+
+/**
+ * Traverse value to find ref
+ * @param value
+ * @param options
+ * @returns
+ */
+function traverseRef(
+  name: string,
+  value: any,
+  cb: (name: string, _v: IFlowRefValue | IFlowTemplateValue) => void
+) {
+  for (const { value: _v, path } of FlowValueUtils.traverse(value, {
+    includeTypes: ['ref', 'template'],
+    path: name,
+  })) {
+    cb(path, _v as IFlowRefValue | IFlowTemplateValue);
+  }
+}

package/src/effects/index.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { autoRenameRefEffect } from './auto-rename-ref';
+export { listenRefSchemaChange } from './listen-ref-schema-change';
+export { listenRefValueChange } from './listen-ref-value-change';
+export { provideBatchInputEffect } from './provide-batch-input';
+export { provideJsonSchemaOutputs } from './provide-json-schema-outputs';
+export { syncVariableTitle } from './sync-variable-title';
+export { validateWhenVariableSync } from './validate-when-variable-sync';

package/src/effects/listen-ref-schema-change/index.ts

@@ -0,0 +1,56 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram-vue/json-schema';
+import { BaseType } from '@flowgram-vue/variable-core';
+import { getNodeScope } from '@flowgram-vue/variable-layout';
+import {
+  DataEvent,
+  type Effect,
+  type EffectFuncProps,
+  type EffectOptions,
+} from '@flowgram-vue/node';
+
+import { IFlowRefValue } from '@/shared';
+
+/**
+ * Example:
+ * const formMeta = {
+ *   effect: {
+ *     'inputsValues.*': listenRefSchemaChange(({ name, schema, form }) => {
+ *       form.setValueIn(`${name}.schema`, schema);
+ *     })
+ *   }
+ * }
+ * @param cb
+ * @returns
+ */
+export const listenRefSchemaChange = (
+  cb: (props: EffectFuncProps<IFlowRefValue> & { schema?: IJsonSchema }) => void
+): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInitOrChange,
+    effect: ((params) => {
+      const { context, value } = params;
+
+      if (value?.type !== 'ref') {
+        return () => null;
+      }
+
+      const disposable = getNodeScope(context.node).available.trackByKeyPath<BaseType | undefined>(
+        value?.content || [],
+        (_type) => {
+          cb({ ...params, schema: JsonSchemaUtils.astToSchema(_type) });
+        },
+        {
+          selector: (_v) => _v?.type,
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];

package/src/effects/listen-ref-value-change/index.ts

@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { BaseVariableField } from '@flowgram-vue/variable-core';
+import { getNodeScope } from '@flowgram-vue/variable-layout';
+import {
+  DataEvent,
+  type Effect,
+  type EffectFuncProps,
+  type EffectOptions,
+} from '@flowgram-vue/node';
+
+import { IFlowRefValue } from '@/shared';
+
+/**
+ * Example:
+ * const formMeta = {
+ *   effect: {
+ *     'inputsValues.*': listenRefValueChange(({ name, variable, form }) => {
+ *       const schema = JsonSchemaUtils.astToSchema(variable?.type);
+ *       form.setValueIn(`${name}.schema`, schema);
+ *     })
+ *   }
+ * }
+ * @param cb
+ * @returns
+ */
+export const listenRefValueChange = (
+  cb: (props: EffectFuncProps<IFlowRefValue> & { variable?: BaseVariableField }) => void
+): EffectOptions[] => [
+  {
+    event: DataEvent.onValueInitOrChange,
+    effect: ((params) => {
+      const { context, value } = params;
+
+      if (value?.type !== 'ref') {
+        return () => null;
+      }
+
+      const disposable = getNodeScope(context.node).available.trackByKeyPath(
+        value?.content || [],
+        (v) => {
+          cb({ ...params, variable: v });
+        }
+      );
+      return () => {
+        disposable.dispose();
+      };
+    }) as Effect,
+  },
+];