@flowgram-vue/form-materials 0.2.0

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@flowgram-vue/form-materials",
+  "version": "0.2.0",
+  "type": "module",
+  "homepage": "https://flowgram.ai/",
+  "repository": "https://github.com/Crayon-hua/flowgram-vue",
+  "license": "MIT",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./components/*": "./src/components/*/index.ts",
+    "./effects/*": "./src/effects/*/index.ts",
+    "./hooks/*": "./src/hooks/*/index.ts",
+    "./shared/*": "./src/shared/*/index.ts",
+    "./form-plugins/*": "./src/form-plugins/*/index.ts",
+    "./plugins/*": "./src/plugins/*/index.ts",
+    "./validate/*": "./src/validate/*/index.ts"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "bin": {
+    "flowgram-form-materials": "./bin/run.sh"
+  },
+  "files": [
+    "src",
+    "bin",
+    "dist"
+  ],
+  "dependencies": {
+    "date-fns": "~4.1.0",
+    "immer": "~10.1.1",
+    "lodash-es": "^4.17.21",
+    "nanoid": "^5.0.9",
+    "zod": "^3.24.4",
+    "@flowgram-vue/core": "0.2.0",
+    "@flowgram-vue/coze-editor": "0.2.0",
+    "@flowgram-vue/form": "0.2.0",
+    "@flowgram-vue/node": "0.2.0",
+    "@flowgram-vue/document": "0.2.0",
+    "@flowgram-vue/json-schema": "0.2.0",
+    "@flowgram-vue/node-variable-plugin": "0.2.0",
+    "@flowgram-vue/renderer": "0.2.0",
+    "@flowgram-vue/utils": "0.2.0",
+    "@flowgram-vue/i18n": "0.2.0",
+    "@flowgram-vue/variable-layout": "0.2.0",
+    "@flowgram-vue/variable-core": "0.2.0",
+    "@flowgram-vue/variable-plugin": "0.2.0"
+  },
+  "peerDependencies": {
+    "vue": "^3.5.0"
+  },
+  "devDependencies": {
+    "@types/lodash-es": "^4.17.12",
+    "@types/node": "^20",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "eslint": "^9.0.0",
+    "jsdom": "^26.1.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4",
+    "vue": "^3.5.18",
+    "@flowgram-vue/build-config": "0.2.0",
+    "@flowgram-vue/eslint-config": "0.2.0",
+    "@flowgram-vue/ts-config": "0.2.0"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "scripts": {
+    "build": "flowgram-build",
+    "test": "vitest run --passWithNoTests",
+    "lint": "eslint .",
+    "ts-check": "tsc --noEmit",
+    "type-check": "tsc --noEmit",
+    "name-export": "node scripts/name-export.js",
+    "run-bin": "node bin/index.js",
+    "build:fast": "flowgram-build --fast",
+    "build:watch": "flowgram-build --watch"
+  }
+}

package/src/components/assign-row/assign-row.vue

@@ -0,0 +1,69 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowConstantRefValue } from '@/shared';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import { BlurInput } from '@/components/blur-input';
+import { FgIconButton, IconMinus } from '@/ui';
+
+import type { AssignRowProps } from './types';
+
+const props = withDefaults(defineProps<AssignRowProps>(), {
+  value: () => ({ operator: 'assign' as const }),
+});
+</script>
+
+<template>
+  <div style="display: flex; align-items: center; gap: 5px">
+    <div style="width: 150px; min-width: 150px; max-width: 150px">
+      <InjectVariableSelector
+        v-if="props.value?.operator === 'assign'"
+        :style="{ width: '100%', height: '26px' }"
+        :value="props.value?.left && typeof props.value.left === 'object' ? props.value.left.content : undefined"
+        :config="{ placeholder: 'Select Left' }"
+        :on-change="
+          (v: string[] | undefined) =>
+            props.onChange?.({
+              ...props.value,
+              operator: 'assign',
+              left: { type: 'ref', content: v },
+            })
+        "
+      />
+      <BlurInput
+        v-else
+        :style="{ height: '26px' }"
+        placeholder="Input Name"
+        :value="typeof props.value?.left === 'string' ? props.value.left : ''"
+        @change="
+          (v) =>
+            props.onChange?.({
+              ...props.value,
+              operator: 'declare',
+              left: v,
+            })
+        "
+      />
+    </div>
+    <div style="flex-grow: 1">
+      <InjectDynamicValueInput
+        :readonly="readonly"
+        :value="props.value?.right as IFlowConstantRefValue | undefined"
+        :on-change="
+          (v?: IFlowConstantRefValue) =>
+            props.onChange?.({
+              ...props.value!,
+              right: v,
+            })
+        "
+      />
+    </div>
+    <div v-if="onDelete">
+      <FgIconButton :icon="IconMinus()" @click="onDelete?.()" />
+    </div>
+  </div>
+</template>

package/src/components/assign-row/index.ts

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

package/src/components/assign-row/types.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowRefValue, IFlowValue } from '@/shared';
+
+export type AssignValueType =
+  | {
+      operator: 'assign';
+      left?: IFlowRefValue;
+      right?: IFlowValue;
+    }
+  | {
+      operator: 'declare';
+      left?: string;
+      right?: IFlowValue;
+    };
+
+export interface AssignRowProps {
+  value?: AssignValueType;
+  onChange?: (value?: AssignValueType) => void;
+  onDelete?: () => void;
+  readonly?: boolean;
+}

package/src/components/assign-rows/assign-rows.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { FieldArray } from '@flowgram-vue/form';
+
+import { AssignRow, type AssignValueType } from '@/components/assign-row';
+import { FgButton, IconPlus } from '@/ui';
+
+defineProps<{
+  name: string;
+  readonly?: boolean;
+  defaultValue?: AssignValueType[];
+}>();
+</script>
+
+<template>
+  <FieldArray :name="name" :default-value="defaultValue">
+    <template #default="{ field }">
+      <div style="display: flex; flex-direction: column; gap: 5px">
+        <AssignRow
+          v-for="(childField, index) in field.map((item: { key: string; value: AssignValueType; onChange: (v?: AssignValueType) => void }) => item)"
+          :key="childField.key"
+          :readonly="readonly"
+          :value="childField.value"
+          :on-change="(value?: AssignValueType) => childField.onChange(value)"
+          :on-delete="() => field.remove(index)"
+        />
+        <div style="display: flex; gap: 5px">
+          <FgButton borderless @click="field.append({ operator: 'assign' })">
+            <IconPlus />
+            Assign
+          </FgButton>
+          <FgButton borderless @click="field.append({ operator: 'declare' })">
+            <IconPlus />
+            Declaration
+          </FgButton>
+        </div>
+      </div>
+    </template>
+  </FieldArray>
+</template>

package/src/components/assign-rows/index.ts

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

package/src/components/batch-outputs/batch-outputs.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { I18n } from '@flowgram-vue/i18n';
+
+import { useObjectList } from '@/hooks';
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { FgButton, FgInput, IconDelete, IconPlus } from '@/ui';
+
+import type { PropsType } from './types';
+import './styles.css';
+
+const props = defineProps<PropsType>();
+const { list, add, updateKey, updateValue, remove } = useObjectList(props);
+</script>
+
+<template>
+  <div>
+    <div class="gedit-m-batch-outputs-rows" :style="style">
+      <div v-for="item in list" :key="item.id" class="gedit-m-batch-outputs-row">
+        <FgInput
+          :style="{ width: '100px' }"
+          :disabled="readonly"
+          :value="item.key"
+          @change="(v) => updateKey(item.id, v)"
+        />
+        <InjectVariableSelector
+          :style="{ flexGrow: 1 }"
+          :readonly="readonly"
+          :value="item.value?.content"
+          :on-change="(v) => updateValue(item.id, { type: 'ref', content: v })"
+        />
+        <FgButton :disabled="readonly" @click="remove(item.id)">
+          <IconDelete />
+        </FgButton>
+      </div>
+    </div>
+    <FgButton :disabled="readonly" @click="() => add()">
+      <IconPlus />
+      {{ I18n.t('Add') }}
+    </FgButton>
+  </div>
+</template>

package/src/components/batch-outputs/index.ts

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

package/src/components/batch-outputs/styles.css

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

package/src/components/batch-outputs/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowRefValue } from '@/shared';
+import type { CSSProperties } from 'vue';
+
+export type ValueType = Record<string, IFlowRefValue | undefined>;
+
+export interface OutputItem {
+  id: number;
+  key?: string;
+  value?: IFlowRefValue;
+}
+
+export interface PropsType {
+  value?: ValueType;
+  onChange: (value?: ValueType) => void;
+  readonly?: boolean;
+  hasError?: boolean;
+  style?: CSSProperties;
+}

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

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { PrivateScopeProvider } from '@flowgram-vue/node-variable-plugin';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { VariableSelector, type VariableSelectorProps } from '@/components/variable-selector';
+
+const batchVariableSchema: IJsonSchema = {
+  type: 'array',
+  extra: { weak: true },
+};
+
+defineProps<VariableSelectorProps>();
+</script>
+
+<template>
+  <PrivateScopeProvider>
+    <VariableSelector v-bind="$props" :include-schema="batchVariableSchema" />
+  </PrivateScopeProvider>
+</template>

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

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

package/src/components/blur-input/blur-input.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ref, watch, type CSSProperties } from 'vue';
+
+import { FgInput } from '@/ui';
+
+const props = defineProps<{
+  value?: string;
+  disabled?: boolean;
+  placeholder?: string;
+  style?: CSSProperties;
+}>();
+
+const emit = defineEmits<{
+  change: [value: string];
+  blur: [event: FocusEvent];
+}>();
+
+const local = ref(String(props.value ?? ''));
+
+watch(
+  () => props.value,
+  (next) => {
+    local.value = String(next ?? '');
+  }
+);
+</script>
+
+<template>
+  <FgInput
+    :value="local"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :style="style"
+    @change="local = $event"
+    @blur="
+      (event) => {
+        emit('change', local);
+        emit('blur', event);
+      }
+    "
+  />
+</template>

package/src/components/blur-input/index.ts

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

package/src/components/code-editor/base-code-editor.vue

@@ -0,0 +1,44 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed } from 'vue';
+import { Editor, Placeholder, Renderer } from '@flowgram-vue/coze-editor';
+
+import type { CodeEditorPropsType } from './types';
+
+import './styles.css';
+
+const props = withDefaults(defineProps<CodeEditorPropsType>(), {
+  languageId: 'python',
+  theme: 'light',
+});
+
+const monacoTheme = computed(() => (props.theme === 'dark' ? 'vs-dark' : 'vs'));
+const editorOptions = computed(() => ({
+  readOnly: props.readonly,
+  lineNumbers: props.mini ? ('off' as const) : ('on' as const),
+  minimap: { enabled: false },
+  ...(props.options || {}),
+}));
+const hint = computed(() => props.placeholder || props.activeLinePlaceholder);
+const editorHeight = computed(() => (props.mini ? '24px' : '120px'));
+</script>
+
+<template>
+  <div class="gedit-m-code-editor-container" :class="{ mini: props.mini }" :style="props.style">
+    <Editor
+      :value="props.value"
+      :language="props.languageId"
+      :theme="monacoTheme"
+      :options="editorOptions"
+      @change="props.onChange"
+    >
+      <Renderer :height="editorHeight" />
+      <Placeholder v-if="hint">{{ hint }}</Placeholder>
+      <slot />
+    </Editor>
+  </div>
+</template>

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

@@ -0,0 +1,58 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { defineComponent, h, type PropType } from 'vue';
+
+import BaseCodeEditor from './base-code-editor.vue';
+import type { CodeEditorPropsType } from './types';
+
+export { default as BaseCodeEditor } from './base-code-editor.vue';
+export type { CodeEditorPropsType } from './types';
+
+function createLanguageEditor(
+  languageId: CodeEditorPropsType['languageId'],
+  displayName: string
+) {
+  return defineComponent({
+    name: displayName,
+    props: {
+      value: { type: String },
+      onChange: { type: Function as PropType<(value: string) => void> },
+      theme: { type: String as PropType<'dark' | 'light'> },
+      placeholder: { type: String },
+      activeLinePlaceholder: { type: String },
+      readonly: { type: Boolean, default: false },
+      options: { type: Object as PropType<Record<string, unknown>> },
+      mini: { type: Boolean, default: false },
+    },
+    setup(props, { slots }) {
+      return () => h(BaseCodeEditor, { ...props, languageId }, () => slots.default?.());
+    },
+  });
+}
+
+export const JsonCodeEditor = createLanguageEditor('json', 'JsonCodeEditor');
+export const PythonCodeEditor = createLanguageEditor('python', 'PythonCodeEditor');
+export const SQLCodeEditor = createLanguageEditor('sql', 'SQLCodeEditor');
+export const ShellCodeEditor = createLanguageEditor('shell', 'ShellCodeEditor');
+export const TypeScriptCodeEditor = createLanguageEditor('typescript', 'TypeScriptCodeEditor');
+
+export const CodeEditor = defineComponent({
+  name: 'CodeEditor',
+  props: {
+    value: { type: String },
+    onChange: { type: Function as PropType<(value: string) => void> },
+    languageId: { type: String as PropType<CodeEditorPropsType['languageId']>, required: true },
+    theme: { type: String as PropType<'dark' | 'light'> },
+    placeholder: { type: String },
+    activeLinePlaceholder: { type: String },
+    readonly: { type: Boolean, default: false },
+    options: { type: Object as PropType<Record<string, unknown>> },
+    mini: { type: Boolean, default: false },
+  },
+  setup(props, { slots }) {
+    return () => h(BaseCodeEditor, { ...props }, () => slots.default?.());
+  },
+});

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

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-code-editor-container {
+  position: relative;
+  width: 100%;
+  min-width: 0;
+  max-width: 100%;
+  overflow: hidden;
+}
+
+.gedit-m-code-editor-container.mini {
+  min-height: 24px;
+}
+
+.gedit-m-code-editor-container.mini .cm-editor,
+.gedit-m-code-editor-container.mini .cm-scroller,
+.gedit-m-code-editor-container.mini .cm-content {
+  min-width: 0;
+  max-width: 100%;
+}
+
+.gedit-m-code-editor-container.mini .cm-scroller {
+  overflow-x: hidden;
+}

package/src/components/code-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';
+
+export interface CodeEditorPropsType {
+  value?: string;
+  onChange?: (value: string) => void;
+  languageId: 'python' | 'typescript' | 'shell' | 'json' | 'sql';
+  theme?: 'dark' | 'light';
+  placeholder?: string;
+  activeLinePlaceholder?: string;
+  readonly?: boolean;
+  options?: Record<string, unknown>;
+  mini?: boolean;
+  style?: CSSProperties;
+  children?: VNode;
+}

package/src/components/code-editor/utils.ts

@@ -0,0 +1,24 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export function getSuffixByLanguageId(languageId: string) {
+  if (languageId === 'python') {
+    return '.py';
+  }
+  if (languageId === 'typescript') {
+    return '.ts';
+  }
+  if (languageId === 'shell') {
+    return '.sh';
+  }
+  if (languageId === 'json') {
+    return '.json';
+  }
+  if (languageId === 'sql') {
+    return '.sql';
+  }
+
+  return '';
+}

package/src/components/code-editor-mini/code-editor-mini.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { CodeEditor, type CodeEditorPropsType } from '@/components/code-editor';
+
+defineProps<CodeEditorPropsType>();
+</script>
+
+<template>
+  <div class="gedit-m-code-editor-mini">
+    <CodeEditor v-bind="{ ...$props, mini: true }" />
+  </div>
+</template>

package/src/components/code-editor-mini/index.ts

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

package/src/components/condition-context/context.ts

@@ -0,0 +1,45 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, defineComponent, inject, provide, type InjectionKey, type PropType } from 'vue';
+
+import { IConditionRule, ConditionOpConfigs } from './types';
+import { defaultConditionOpConfigs } from './op';
+
+interface ContextType {
+  rules?: Record<string, IConditionRule>;
+  ops?: ConditionOpConfigs;
+}
+
+const ConditionContextKey: InjectionKey<ContextType> = Symbol('ConditionContext');
+
+export const ConditionProvider = defineComponent({
+  name: 'ConditionProvider',
+  props: {
+    rules: { type: Object as PropType<Record<string, IConditionRule>>, default: undefined },
+    ops: { type: Object as PropType<ConditionOpConfigs>, default: undefined },
+  },
+  setup(props, { slots }) {
+    provide(
+      ConditionContextKey,
+      computed(() => ({
+        rules: props.rules,
+        ops: props.ops,
+      })).value
+    );
+    const ctx = computed(() => ({
+      rules: props.rules,
+      ops: props.ops,
+    }));
+    provide(ConditionContextKey, ctx as unknown as ContextType);
+    return () => slots.default?.();
+  },
+});
+
+export const useConditionContext = (): ContextType =>
+  inject(ConditionContextKey, {
+    rules: {},
+    ops: defaultConditionOpConfigs,
+  });