@flowgram-vue/form-materials 0.2.0

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

@@ -0,0 +1,120 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, ref, unref, watch } from 'vue';
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { useTypeManager } from '@/plugins';
+
+import { IConditionRule, ConditionOpConfigs } from '../types';
+import { useConditionContext } from '../context';
+
+interface HooksParams {
+  leftSchema?: IJsonSchema;
+  operator?: string;
+  onClearOp?: () => void;
+  onClearRight?: () => void;
+  ruleConfig?: {
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
+  };
+}
+
+export function useCondition({
+  leftSchema,
+  operator,
+  onClearOp,
+  onClearRight,
+  ruleConfig,
+}: HooksParams) {
+  const typeManager = useTypeManager();
+  const conditionCtx = useConditionContext();
+  const contextRules = computed(() => unref(conditionCtx)?.rules);
+  const contextOps = computed(() => unref(conditionCtx)?.ops);
+
+  const userRules = computed(() => ruleConfig?.rules || contextRules.value || {});
+  const allOps = computed(() => ruleConfig?.ops || contextOps.value || {});
+
+  const config = computed(() =>
+    leftSchema ? typeManager.getTypeBySchema(leftSchema) : undefined
+  );
+
+  const rule = computed(() => {
+    const current = config.value;
+    if (!current) {
+      return undefined;
+    }
+    if (userRules.value[current.type]) {
+      return userRules.value[current.type];
+    }
+    if (typeof current.conditionRule === 'function') {
+      return current.conditionRule(leftSchema);
+    }
+    return current.conditionRule;
+  });
+
+  const opOptionList = computed(() =>
+    Object.keys(rule.value || {})
+      .filter((_op) => allOps.value[_op])
+      .map((_op) => ({
+        ...(allOps.value?.[_op] || {}),
+        value: _op,
+        label: I18n.t(allOps.value?.[_op]?.label || _op),
+      }))
+  );
+
+  watch(
+    () => [operator, opOptionList.value],
+    () => {
+      if (!operator || !rule.value) {
+        return;
+      }
+      if (!opOptionList.value.find((item) => item.value === operator)) {
+        onClearOp?.();
+      }
+    }
+  );
+
+  const targetSchema = computed(() => {
+    const targetType: string | IJsonSchema | null = rule.value?.[operator || ''] || null;
+
+    if (!targetType) {
+      return undefined;
+    }
+
+    if (typeof targetType === 'string') {
+      return { type: targetType, extra: { weak: true } };
+    }
+
+    return targetType;
+  });
+
+  const prevTargetSchemaRef = ref<IJsonSchema | undefined>(undefined);
+
+  watch(
+    () => targetSchema.value,
+    (next) => {
+      if (!prevTargetSchemaRef.value) {
+        prevTargetSchemaRef.value = next;
+        return;
+      }
+      if (prevTargetSchemaRef.value?.type !== next?.type) {
+        onClearRight?.();
+      }
+      prevTargetSchemaRef.value = next;
+    }
+  );
+
+  const opConfig = computed(() => allOps.value[operator || '']);
+
+  return {
+    rule,
+    opConfig,
+    opOptionList,
+    targetSchema,
+  };
+}

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

@@ -0,0 +1,14 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export {
+  type IConditionRule,
+  type IConditionRuleFactory,
+  type ConditionOpConfigs,
+  type ConditionOpConfig,
+} from './types';
+export { ConditionPresetOp } from './op';
+export { ConditionProvider, useConditionContext } from './context';
+export { useCondition } from './hooks/use-condition';

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

@@ -0,0 +1,86 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ConditionOpConfigs } from './types';
+
+export enum ConditionPresetOp {
+  EQ = 'eq',
+  NEQ = 'neq',
+  GT = 'gt',
+  GTE = 'gte',
+  LT = 'lt',
+  LTE = 'lte',
+  IN = 'in',
+  NIN = 'nin',
+  CONTAINS = 'contains',
+  NOT_CONTAINS = 'not_contains',
+  IS_EMPTY = 'is_empty',
+  IS_NOT_EMPTY = 'is_not_empty',
+  IS_TRUE = 'is_true',
+  IS_FALSE = 'is_false',
+}
+
+export const defaultConditionOpConfigs: ConditionOpConfigs = {
+  [ConditionPresetOp.EQ]: {
+    label: 'Equal',
+    abbreviation: '=',
+  },
+  [ConditionPresetOp.NEQ]: {
+    label: 'Not Equal',
+    abbreviation: '≠',
+  },
+  [ConditionPresetOp.GT]: {
+    label: 'Greater Than',
+    abbreviation: '>',
+  },
+  [ConditionPresetOp.GTE]: {
+    label: 'Greater Than or Equal',
+    abbreviation: '>=',
+  },
+  [ConditionPresetOp.LT]: {
+    label: 'Less Than',
+    abbreviation: '<',
+  },
+  [ConditionPresetOp.LTE]: {
+    label: 'Less Than or Equal',
+    abbreviation: '<=',
+  },
+  [ConditionPresetOp.IN]: {
+    label: 'In',
+    abbreviation: '∈',
+  },
+  [ConditionPresetOp.NIN]: {
+    label: 'Not In',
+    abbreviation: '∉',
+  },
+  [ConditionPresetOp.CONTAINS]: {
+    label: 'Contains',
+    abbreviation: '⊇',
+  },
+  [ConditionPresetOp.NOT_CONTAINS]: {
+    label: 'Not Contains',
+    abbreviation: '⊉',
+  },
+  [ConditionPresetOp.IS_EMPTY]: {
+    label: 'Is Empty',
+    abbreviation: '=',
+    rightDisplay: 'Empty',
+  },
+  [ConditionPresetOp.IS_NOT_EMPTY]: {
+    label: 'Is Not Empty',
+    abbreviation: '≠',
+    rightDisplay: 'Empty',
+  },
+  [ConditionPresetOp.IS_TRUE]: {
+    label: 'Is True',
+    abbreviation: '=',
+    rightDisplay: 'True',
+  },
+  [ConditionPresetOp.IS_FALSE]: {
+    label: 'Is False',
+    abbreviation: '=',
+    rightDisplay: 'False',
+  },
+};

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

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { type IJsonSchema } from '@flowgram-vue/json-schema';
+
+export interface ConditionOpConfig {
+  label: string;
+  abbreviation: string;
+  // When right is not a value, display this text
+  rightDisplay?: string;
+}
+
+export type OpKey = string;
+
+export type ConditionOpConfigs = Record<OpKey, ConditionOpConfig>;
+
+export type IConditionRule = Record<OpKey, string | IJsonSchema | null>;
+export type IConditionRuleFactory = (
+  schema?: IJsonSchema
+) => Record<OpKey, string | IJsonSchema | null>;

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

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, unref, type CSSProperties } from 'vue';
+import { JsonSchemaUtils } from '@flowgram-vue/json-schema';
+import { I18n } from '@flowgram-vue/i18n';
+import { useScopeAvailable } from '@flowgram-vue/variable-core';
+
+import { InjectVariableSelector } from '@/components/variable-selector';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import {
+  type IConditionRule,
+  type ConditionOpConfigs,
+  useCondition,
+} from '@/components/condition-context';
+import { FgButton, FgInput, FgSelect, IconChevronDown } from '@/ui';
+
+import type { ConditionRowValueType } from './types';
+import './styles.css';
+
+const props = defineProps<{
+  value?: ConditionRowValueType;
+  onChange: (value?: ConditionRowValueType) => void;
+  style?: CSSProperties;
+  readonly?: boolean;
+  ruleConfig?: {
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
+  };
+}>();
+
+const available = useScopeAvailable();
+const left = computed(() => props.value?.left);
+const operator = computed(() => props.value?.operator);
+const right = computed(() => props.value?.right);
+
+const variable = computed(() => {
+  if (!left.value) {
+    return undefined;
+  }
+  return available.value.getByKeyPath(left.value.content);
+});
+
+const leftSchema = computed(() => {
+  if (!variable.value) {
+    return undefined;
+  }
+  return JsonSchemaUtils.astToSchema(variable.value.type, { drilldown: false });
+});
+
+const condition = useCondition({
+  get leftSchema() {
+    return leftSchema.value;
+  },
+  get operator() {
+    return operator.value;
+  },
+  ruleConfig: props.ruleConfig,
+  onClearOp() {
+    props.onChange({
+      ...props.value,
+      operator: undefined,
+    });
+  },
+  onClearRight() {
+    props.onChange({
+      ...props.value,
+      right: undefined,
+    });
+  },
+});
+</script>
+
+<template>
+  <div class="gedit-m-condition-row-container" :style="style">
+    <div class="gedit-m-condition-row-operator">
+      <FgSelect
+        :disabled="readonly"
+        :value="operator"
+        :options="unref(condition.opOptionList)"
+        @change="(v) => onChange({ ...value, operator: String(v) })"
+      >
+        <template #trigger>
+          <FgButton :disabled="!unref(condition.rule)">
+            {{ unref(condition.opConfig)?.abbreviation || '' }}
+            <IconChevronDown v-if="!unref(condition.opConfig)?.abbreviation" />
+          </FgButton>
+        </template>
+      </FgSelect>
+    </div>
+    <div class="gedit-m-condition-row-values">
+      <div class="gedit-m-condition-row-left">
+        <InjectVariableSelector
+          :readonly="readonly"
+          :style="{ width: '100%' }"
+          :value="left?.content"
+          :on-change="
+            (v: string[] | undefined) =>
+              onChange({
+                ...value,
+                left: { type: 'ref', content: v },
+              })
+          "
+        />
+      </div>
+      <div class="gedit-m-condition-row-right">
+        <InjectDynamicValueInput
+          v-if="unref(condition.targetSchema)"
+          :readonly="readonly || !unref(condition.rule)"
+          :value="right"
+          :schema="unref(condition.targetSchema)"
+          :on-change="(v) => onChange({ ...value, right: v })"
+        />
+        <FgInput
+          v-else
+          disabled
+          :style="{ pointerEvents: 'none' }"
+          :value="unref(condition.opConfig)?.rightDisplay || I18n.t('Empty')"
+        />
+      </div>
+    </div>
+  </div>
+</template>

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

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

package/src/components/condition-row/styles.css

@@ -0,0 +1,30 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-condition-row-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gedit-m-condition-row-operator {
+}
+
+.gedit-m-condition-row-left {
+  width: 100%;
+}
+
+.gedit-m-condition-row-right {
+  width: 100%;
+}
+
+.gedit-m-condition-row-values {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+}

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

@@ -0,0 +1,12 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IFlowConstantRefValue, IFlowRefValue } from '@/shared';
+
+export interface ConditionRowValueType {
+  left?: IFlowRefValue;
+  operator?: string;
+  right?: IFlowConstantRefValue;
+}

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

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, h } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { useTypeManager } from '@/plugins';
+import { FgInput } from '@/ui';
+
+import type { PropsType } from './types';
+
+const props = defineProps<PropsType>();
+
+const typeManager = useTypeManager();
+
+const Renderer = computed(() => {
+  const strategy = (props.strategies || []).find((_strategy) => _strategy.hit(props.schema));
+  if (!strategy) {
+    return typeManager.getTypeBySchema(props.schema)?.ConstantRenderer;
+  }
+  return strategy?.Renderer;
+});
+</script>
+
+<template>
+  <component
+    :is="Renderer"
+    v-if="Renderer"
+    :value="value"
+    :readonly="readonly"
+    :schema="schema"
+    v-bind="{ ...$attrs }"
+    @change="onChange"
+  />
+  <component
+    :is="fallbackRenderer"
+    v-else-if="fallbackRenderer"
+    :value="value"
+    :readonly="readonly"
+    :schema="schema"
+    v-bind="{ ...$attrs }"
+    @change="onChange"
+  />
+  <FgInput v-else disabled :placeholder="I18n.t('Unsupported type')" />
+</template>

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as ConstantInput } from './constant-input.vue';
+export type { ConstantInputStrategy, PropsType, Strategy } from './types';

package/src/components/constant-input/types.ts

@@ -0,0 +1,23 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { Component } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { ConstantRendererProps } from '@/plugins';
+
+export interface Strategy<Value = any> {
+  hit: (schema: IJsonSchema) => boolean;
+  Renderer: Component;
+}
+
+export interface PropsType extends ConstantRendererProps {
+  schema: IJsonSchema;
+  strategies?: Strategy[];
+  fallbackRenderer?: Component;
+  [key: string]: any;
+}
+
+export type ConstantInputStrategy = Strategy;

package/src/components/coze-editor-extensions/extensions/inputs-tree.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { IInputsValues } from '@/shared/flow-value';
+
+defineProps<{
+  inputsValues?: IInputsValues;
+}>();
+</script>
+
+<template>
+  <div class="gedit-m-editor-inputs-tree" />
+</template>

package/src/components/coze-editor-extensions/extensions/variable-tag.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+</script>
+
+<template>
+  <span class="gedit-m-editor-variable-tag" />
+</template>

package/src/components/coze-editor-extensions/extensions/variable-tree.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { VariableSelector } from '@/components/variable-selector';
+
+defineProps<{
+  triggerCharacters?: string[];
+}>();
+</script>
+
+<template>
+  <div class="gedit-m-editor-variable-tree">
+    <VariableSelector :on-change="() => undefined" />
+  </div>
+</template>

package/src/components/coze-editor-extensions/index.ts

@@ -0,0 +1,22 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createInjectMaterial } from '@/shared';
+
+import VariableTree from './extensions/variable-tree.vue';
+import VariableTagInject from './extensions/variable-tag.vue';
+import InputsTree from './extensions/inputs-tree.vue';
+
+export const EditorVariableTree = createInjectMaterial(VariableTree, {
+  renderKey: 'EditorVariableTree',
+});
+
+export const EditorVariableTagInject = createInjectMaterial(VariableTagInject, {
+  renderKey: 'EditorVariableTagInject',
+});
+
+export const EditorInputsTree = createInjectMaterial(InputsTree, {
+  renderKey: 'EditorInputsTree',
+});

package/src/components/coze-editor-extensions/styles.css

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-coze-editor-root-title {
+  margin-right: 4px;
+  min-width: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--semi-color-text-2);
+}
+
+.gedit-m-coze-editor-var-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gedit-m-coze-editor-tag {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  max-width: 300px;
+
+  & .semi-tag-content-center {
+    justify-content: flex-start;
+  }
+
+  &.semi-tag {
+    margin: 0 5px;
+  }
+}
+
+.gedit-m-coze-editor-popover-content {
+  padding: 10px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+}