@flowgram-vue/form-materials 0.2.0

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

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, h, unref, type CSSProperties } from 'vue';
+import { I18n } from '@flowgram-vue/i18n';
+
+import { useTypeManager } from '@/plugins';
+import { InjectDynamicValueInput } from '@/components/dynamic-value-input';
+import {
+  useCondition,
+  type ConditionOpConfigs,
+  type IConditionRule,
+} from '@/components/condition-context';
+import { FgButton, FgInput, FgSelect, IconChevronDown } from '@/ui';
+
+import type { DBConditionOptionType, DBConditionRowValueType } from './types';
+import './styles.css';
+
+const props = defineProps<{
+  value?: DBConditionRowValueType;
+  onChange: (value?: DBConditionRowValueType) => void;
+  style?: CSSProperties;
+  options?: DBConditionOptionType[];
+  readonly?: boolean;
+  ruleConfig?: {
+    ops?: ConditionOpConfigs;
+    rules?: Record<string, IConditionRule>;
+  };
+}>();
+
+const typeManager = useTypeManager();
+const left = computed(() => props.value?.left);
+const operator = computed(() => props.value?.operator);
+const right = computed(() => props.value?.right);
+const leftSchema = computed(() => props.options?.find((item) => item.value === left.value)?.schema);
+
+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 });
+  },
+});
+
+const optionList = computed(
+  () =>
+    props.options?.map((item) => ({
+      label: h('div', { class: 'gedit-m-db-condition-row-option-label' }, [
+        typeManager.getDisplayIcon(item.schema),
+        item.label,
+      ]),
+      value: item.value,
+    })) || []
+);
+</script>
+
+<template>
+  <div class="gedit-m-db-condition-row-container" :style="style">
+    <div class="gedit-m-db-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-db-condition-row-values">
+      <div class="gedit-m-db-condition-row-left">
+        <FgSelect
+          class="gedit-m-db-condition-row-select"
+          :disabled="readonly"
+          :value="left"
+          :options="optionList"
+          @change="(v) => onChange({ ...value, left: String(v) })"
+        />
+      </div>
+      <div class="gedit-m-db-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/db-condition-row/index.ts

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

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

@@ -0,0 +1,41 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-db-condition-row-container {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.gedit-m-db-condition-row-operator {
+}
+
+.gedit-m-db-condition-row-left {
+  width: 100%;
+}
+
+.gedit-m-db-condition-row-right {
+  width: 100%;
+}
+
+.gedit-m-db-condition-row-values {
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+}
+
+.gedit-m-db-condition-row-option-label {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.gedit-m-db-condition-row-select {
+  & .semi-select-selection {
+    margin-left: 5px;
+  }
+}

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

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { IFlowConstantRefValue } from '@/shared';
+
+export interface DBConditionRowValueType {
+  left?: string;
+  operator?: string;
+  right?: IFlowConstantRefValue;
+}
+
+export interface DBConditionOptionType {
+  label: string | import('vue').VNode;
+  value: string;
+  schema: IJsonSchema;
+}

package/src/components/display-flow-value/display-flow-value.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, type VNode } from 'vue';
+import { JsonSchemaUtils } from '@flowgram-vue/json-schema';
+import { useScopeAvailable } from '@flowgram-vue/variable-core';
+
+import { type IFlowValue, FlowValueUtils } from '@/shared';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
+
+const props = defineProps<{
+  value?: IFlowValue;
+  title?: VNode | string;
+  showIconInTree?: boolean;
+}>();
+
+const available = useScopeAvailable();
+const variable = computed(() =>
+  props.value?.type === 'ref' ? available.value.getByKeyPath(props.value?.content) : undefined
+);
+
+const schema = computed(() => {
+  if (props.value?.type === 'ref') {
+    return JsonSchemaUtils.astToSchema(variable.value?.type);
+  }
+  if (props.value?.type === 'template') {
+    return { type: 'string' };
+  }
+  if (props.value?.type === 'constant') {
+    return FlowValueUtils.inferConstantJsonSchema(props.value);
+  }
+  return { type: 'unknown' };
+});
+</script>
+
+<template>
+  <DisplaySchemaTag
+    :title="title"
+    :value="schema"
+    :show-icon-in-tree="showIconInTree"
+    :warning="value?.type === 'ref' && !variable"
+  />
+</template>

package/src/components/display-flow-value/index.ts

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

package/src/components/display-inputs-values/display-inputs-value-all-in-tag.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed } from 'vue';
+import { useScopeAvailable } from '@flowgram-vue/variable-core';
+
+import { type IInputsValues } from '@/shared/flow-value';
+import { FlowValueUtils } from '@/shared';
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
+
+const props = defineProps<{
+  value?: IInputsValues;
+  title: string;
+  showIconInTree?: boolean;
+}>();
+
+const available = useScopeAvailable();
+const schema = computed(() => FlowValueUtils.inferJsonSchema(props.value, available.value.scope));
+</script>
+
+<template>
+  <DisplaySchemaTag :title="title" :value="schema" :show-icon-in-tree="showIconInTree" />
+</template>

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

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed } from 'vue';
+import { isPlainObject } from 'lodash-es';
+import { useScopeAvailable } from '@flowgram-vue/variable-core';
+
+import { type IInputsValues } from '@/shared/flow-value';
+import { FlowValueUtils } from '@/shared';
+import { DisplayFlowValue } from '@/components/display-flow-value';
+import DisplayInputsValueAllInTag from './display-inputs-value-all-in-tag.vue';
+
+import './styles.css';
+
+defineProps<{
+  value?: IInputsValues;
+  showIconInTree?: boolean;
+}>();
+
+const childEntries = (value?: IInputsValues) => Object.entries(value || {});
+</script>
+
+<template>
+  <div class="gedit-m-display-inputs-wrapper">
+    <template v-for="[key, child] in childEntries(value)" :key="key">
+      <DisplayFlowValue
+        v-if="FlowValueUtils.isFlowValue(child)"
+        :title="key"
+        :value="child"
+        :show-icon-in-tree="showIconInTree"
+      />
+      <DisplayInputsValueAllInTag
+        v-else-if="isPlainObject(child)"
+        :title="key"
+        :value="child"
+        :show-icon-in-tree="showIconInTree"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,7 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as DisplayInputsValues } from './display-inputs-values.vue';
+export { default as DisplayInputsValueAllInTag } from './display-inputs-value-all-in-tag.vue';

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-display-inputs-wrapper {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}

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

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, onBeforeUnmount, onMounted, type CSSProperties } from 'vue';
+import { IJsonSchema, JsonSchemaUtils } from '@flowgram-vue/json-schema';
+import { useCurrentScope } from '@flowgram-vue/variable-core';
+import { useRefresh } from '@flowgram-vue/utils';
+
+import { DisplaySchemaTag } from '@/components/display-schema-tag';
+
+import './styles.css';
+
+const props = defineProps<{
+  value?: IJsonSchema;
+  showIconInTree?: boolean;
+  displayFromScope?: boolean;
+  style?: CSSProperties;
+}>();
+
+const scope = useCurrentScope();
+const refresh = useRefresh();
+
+onMounted(() => {
+  if (!props.displayFromScope || !scope) {
+    return;
+  }
+  const disposable = scope.output.onListOrAnyVarChange(() => {
+    refresh();
+  });
+  onBeforeUnmount(() => disposable.dispose());
+});
+
+const properties = computed<IJsonSchema['properties']>(() =>
+  props.displayFromScope
+    ? (scope?.output.variables || []).reduce((acm, curr) => {
+        acm = {
+          ...acm,
+          ...(JsonSchemaUtils.astToSchema(curr.type)?.properties || {}),
+        };
+        return acm;
+      }, {} as IJsonSchema['properties'])
+    : props.value?.properties || {}
+);
+
+const childEntries = computed(() => Object.entries(properties.value || {}));
+</script>
+
+<template>
+  <div class="gedit-m-display-outputs-wrapper" :style="style">
+    <DisplaySchemaTag
+      v-for="[key, schema] in childEntries"
+      :key="key"
+      :title="key"
+      :value="schema"
+      :show-icon-in-tree="showIconInTree"
+      :warning="!schema"
+    />
+  </div>
+</template>

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

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

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

@@ -0,0 +1,10 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-display-outputs-wrapper {
+  display: flex;
+  gap: 5px;
+  flex-wrap: wrap;
+}

package/src/components/display-schema-tag/display-schema-tag.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { VNode } from 'vue';
+import { IJsonSchema } from '@flowgram-vue/json-schema';
+
+import { useTypeManager } from '@/plugins';
+import { FgPopover, FgTag } from '@/ui';
+import { DisplaySchemaTree } from '@/components/display-schema-tree';
+
+import './styles.css';
+
+defineProps<{
+  title?: VNode | string;
+  value?: IJsonSchema;
+  showIconInTree?: boolean;
+  warning?: boolean;
+}>();
+
+const typeManager = useTypeManager();
+</script>
+
+<template>
+  <FgPopover>
+    <FgTag :color="warning ? 'amber' : 'white'" class="gedit-m-display-schema-tag-tag">
+      <component
+        :is="typeManager?.getDisplayIcon(value || {}) || typeManager.getDisplayIcon({ type: 'unknown' })"
+        class="tag-icon"
+      />
+      <span v-if="title" class="gedit-m-display-schema-tag-title">{{ title }}</span>
+    </FgTag>
+    <template #content>
+      <div class="gedit-m-display-schema-tag-popover-content">
+        <DisplaySchemaTree :value="value || {}" :type-manager="typeManager" :show-icon="showIconInTree" />
+      </div>
+    </template>
+  </FgPopover>
+</template>

package/src/components/display-schema-tag/index.ts

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

package/src/components/display-schema-tag/styles.css

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-display-schema-tag-popover-content {
+  padding: 10px;
+}
+
+.gedit-m-display-schema-tag-tag {
+  padding: 4px;
+
+  & .tag-icon {
+    width: 12px;
+    height: 12px;
+  }
+}
+
+.gedit-m-display-schema-tag-title {
+  display: inline-block;
+  margin-left: 4px;
+  margin-top: -1px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

package/src/components/display-schema-tree/display-schema-tree.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import {
+  type IJsonSchema,
+  type JsonSchemaTypeManager,
+  useTypeManager,
+} from '@flowgram-vue/json-schema';
+
+import './styles.css';
+
+const props = withDefaults(
+  defineProps<{
+    value?: IJsonSchema;
+    parentKey?: string;
+    depth?: number;
+    drilldown?: boolean;
+    showIcon?: boolean;
+    typeManager?: JsonSchemaTypeManager;
+  }>(),
+  { value: () => ({}), drilldown: true, depth: 0, showIcon: true, parentKey: '' }
+);
+
+const injectedTypeManager = useTypeManager() as JsonSchemaTypeManager;
+const typeManager = props.typeManager || injectedTypeManager;
+const config = typeManager.getTypeBySchema(props.value);
+const title = typeManager.getComplexText(props.value);
+const icon = typeManager?.getDisplayIcon(props.value);
+const properties: IJsonSchema['properties'] =
+  props.drilldown && config ? config.getTypeSchemaProperties(props.value) : {};
+const childEntries = Object.entries(properties || {});
+</script>
+
+<template>
+  <div :class="`gedit-m-display-schema-tree-item depth-${depth}`">
+    <div class="gedit-m-display-schema-tree-row">
+      <div v-if="depth !== 0" class="gedit-m-display-schema-tree-horizontal-line" />
+      <component v-if="showIcon && icon" :is="icon" class="tree-icon" />
+      <div class="gedit-m-display-schema-tree-title">
+        <template v-if="parentKey">{{ parentKey }} ({{ title }})</template>
+        <template v-else>{{ title }}</template>
+      </div>
+    </div>
+    <div v-if="childEntries.length" class="gedit-m-display-schema-tree-level">
+      <DisplaySchemaTree
+        v-for="[key, child] in childEntries"
+        :key="key"
+        v-bind="{ ...$props, parentKey: key, value: child, depth: depth + 1 }"
+      />
+    </div>
+  </div>
+</template>

package/src/components/display-schema-tree/index.ts

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

package/src/components/display-schema-tree/styles.css

@@ -0,0 +1,84 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.gedit-m-display-schema-tree-row {
+  display: flex;
+  align-items: center;
+
+  & .tree-icon {
+    margin-right: 8px;
+    width: 14px;
+    height: 14px;
+  }
+
+  height: 27px;
+  white-space: nowrap;
+}
+
+.gedit-m-display-schema-tree-horizontal-line {
+  position: relative;
+
+  &::before,
+  &::after {
+    content: "";
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &::after {
+    top: 0px;
+    right: 6px;
+    width: 15px;
+    height: 1px;
+  }
+}
+
+.gedit-m-display-schema-tree-title {
+  /* overflow: hidden;
+  text-overflow: ellipsis; */
+}
+
+.gedit-m-display-schema-tree-level {
+  padding-left: 30px;
+  position: relative;
+
+  /* &::before {
+    content: '';
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+    top: 0px;
+    bottom: 0px;
+    left: -22px;
+    width: 1px;
+  } */
+}
+
+.gedit-m-display-schema-tree-item {
+  position: relative;
+
+  &::before {
+    content: "";
+    position: absolute;
+    background-color: var(--semi-color-text-3);
+  }
+
+  &:not(:last-child)::before {
+    width: 1px;
+    top: 0;
+    bottom: 0;
+    left: -22px;
+  }
+
+  &:last-child::before {
+    width: 1px;
+    top: 0;
+    height: 14px;
+    left: -22px;
+  }
+
+  &.depth-0::before {
+    width: 0px !important;
+  }
+}