@flowgram-vue/form-materials 0.2.0

package/src/ui/index.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+export { default as FgButton } from './fg-button.vue';
+export { default as FgIconButton } from './fg-icon-button.vue';
+export { default as FgInput } from './fg-input.vue';
+export { default as FgTextarea } from './fg-textarea.vue';
+export { default as FgSelect } from './fg-select.vue';
+export { default as FgCheckbox } from './fg-checkbox.vue';
+export { default as FgTag } from './fg-tag.vue';
+export { default as FgPopover } from './fg-popover.vue';
+export { default as FgModal } from './fg-modal.vue';
+export { default as FgTreeSelect } from './fg-tree-select.vue';
+export { default as FgCascader } from './fg-cascader.vue';
+export * from './icons';
+export type { FgTreeNode, FgSelectOption, FgCascaderOption, FgStyle } from './types';
+
+import './styles.css';

package/src/ui/styles.css

@@ -0,0 +1,277 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+.fg-btn,
+.fg-icon-btn,
+.fg-input,
+.fg-textarea,
+.fg-select,
+.fg-checkbox {
+  font-family: inherit;
+  font-size: 12px;
+  box-sizing: border-box;
+}
+
+.fg-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  height: 24px;
+  padding: 0 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  color: #1c1f23;
+  cursor: pointer;
+}
+
+.fg-btn:hover:not(:disabled) {
+  border-color: #3370ff;
+  color: #3370ff;
+}
+
+.fg-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.fg-btn.borderless {
+  border-color: transparent;
+  background: transparent;
+}
+
+.fg-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: none;
+  border-radius: 4px;
+  background: transparent;
+  color: #4d5969;
+  cursor: pointer;
+}
+
+.fg-icon-btn:hover:not(:disabled) {
+  background: #f2f3f5;
+}
+
+.fg-icon-btn:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fg-input,
+.fg-textarea,
+.fg-select {
+  width: 100%;
+  min-height: 22px;
+  padding: 2px 8px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  color: #1c1f23;
+}
+
+.fg-input:focus,
+.fg-textarea:focus,
+.fg-select:focus {
+  outline: none;
+  border-color: #3370ff;
+}
+
+.fg-input:disabled,
+.fg-textarea:disabled,
+.fg-select:disabled {
+  background: #f5f6f7;
+  color: #8f959e;
+}
+
+.fg-input.error,
+.fg-select.error,
+.fg-tree-select.error .fg-tree-select-trigger {
+  border-color: #f93920;
+}
+
+.fg-textarea {
+  min-height: 48px;
+  resize: vertical;
+}
+
+.fg-checkbox {
+  width: 14px;
+  height: 14px;
+}
+
+.fg-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  max-width: 100%;
+  height: 22px;
+  padding: 0 6px;
+  border-radius: 4px;
+  background: #f2f3f5;
+  color: #1c1f23;
+  overflow: hidden;
+}
+
+.fg-tag.amber {
+  background: #fff3e8;
+  color: #b25e09;
+}
+
+.fg-tag.white {
+  background: #fff;
+  border: 1px solid #e5e6eb;
+}
+
+.fg-tag-close {
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  color: inherit;
+}
+
+.fg-popover {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.fg-popover-content {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 120px;
+  padding: 8px;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.fg-modal-mask {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.35);
+}
+
+.fg-modal {
+  width: min(600px, calc(100vw - 32px));
+  background: #fff;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.fg-modal-title {
+  font-size: 16px;
+  font-weight: 600;
+  margin-bottom: 12px;
+}
+
+.fg-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+}
+
+.fg-tree-select {
+  position: relative;
+  width: 100%;
+}
+
+.fg-tree-select-trigger {
+  display: flex;
+  align-items: center;
+  min-height: 22px;
+  padding: 0 6px;
+  border: 1px solid #d9d9d9;
+  border-radius: 4px;
+  background: #fff;
+  cursor: pointer;
+}
+
+.fg-tree-select-trigger.disabled {
+  background: #f5f6f7;
+  cursor: not-allowed;
+}
+
+.fg-tree-select-placeholder {
+  color: #8f959e;
+  padding-left: 4px;
+}
+
+.fg-tree-select-dropdown,
+.fg-cascader-dropdown {
+  position: absolute;
+  z-index: 30;
+  top: calc(100% + 4px);
+  left: 0;
+  min-width: 180px;
+  max-height: 300px;
+  overflow: auto;
+  background: #fff;
+  border: 1px solid #e5e6eb;
+  border-radius: 6px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
+}
+
+.fg-tree-node,
+.fg-cascader-option,
+.fg-select-option {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  width: 100%;
+  padding: 6px 10px;
+  border: none;
+  background: transparent;
+  text-align: left;
+  cursor: pointer;
+  color: #1c1f23;
+}
+
+.fg-tree-node:hover,
+.fg-cascader-option:hover,
+.fg-select-option:hover {
+  background: #f2f3f5;
+}
+
+.fg-tree-node.disabled,
+.fg-cascader-option.disabled,
+.fg-select-option:disabled {
+  opacity: 0.45;
+  cursor: not-allowed;
+}
+
+.fg-tree-children {
+  padding-left: 14px;
+}
+
+.fg-skeleton {
+  height: 22px;
+  border-radius: 4px;
+  background: linear-gradient(90deg, #f2f3f5 25%, #e8eaed 37%, #f2f3f5 63%);
+  background-size: 400% 100%;
+}
+
+.fg-icon {
+  flex-shrink: 0;
+}
+
+.fg-select-wrap {
+  position: relative;
+  width: 100%;
+}

package/src/ui/types.ts

@@ -0,0 +1,36 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties, VNode } from 'vue';
+
+export interface FgTreeNode {
+  key: string;
+  label: string;
+  value?: string;
+  keyPath?: string[];
+  icon?: VNode | string;
+  children?: FgTreeNode[];
+  disabled?: boolean;
+  rootMeta?: {
+    icon?: VNode | string;
+    title?: string;
+    disabled?: boolean;
+  };
+  isRoot?: boolean;
+}
+
+export interface FgSelectOption {
+  label: string | VNode;
+  value: string | number;
+  disabled?: boolean;
+}
+
+export interface FgCascaderOption {
+  label: string | VNode;
+  value: string;
+  children?: FgCascaderOption[];
+}
+
+export type FgStyle = CSSProperties;

package/src/validate/index.ts

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

package/src/validate/validate-flow-value/index.ts

@@ -0,0 +1,62 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { isNil } from 'lodash-es';
+import { FeedbackLevel } from '@flowgram-vue/form';
+import { FlowNodeEntity } from '@flowgram-vue/document';
+import { getNodeScope } from '@flowgram-vue/variable-layout';
+
+import { type IFlowValue, FlowValueUtils } from '@/shared';
+
+interface Context {
+  node: FlowNodeEntity;
+  required?: boolean;
+  errorMessages?: {
+    required?: string;
+    unknownVariable?: string;
+  };
+}
+
+export function validateFlowValue(value: IFlowValue | undefined, ctx: Context) {
+  const { node, required, errorMessages } = ctx;
+
+  const {
+    required: requiredMessage = 'Field is required',
+    unknownVariable: unknownVariableMessage = 'Unknown Variable',
+  } = errorMessages || {};
+
+  if (required && (isNil(value) || isNil(value?.content) || value?.content === '')) {
+    return {
+      level: FeedbackLevel.Error,
+      message: requiredMessage,
+    };
+  }
+
+  if (value?.type === 'ref') {
+    const variable = getNodeScope(node).available.getByKeyPath(value?.content || []);
+    if (!variable) {
+      return {
+        level: FeedbackLevel.Error,
+        message: unknownVariableMessage,
+      };
+    }
+  }
+
+  if (value?.type === 'template') {
+    const allRefs = FlowValueUtils.getTemplateKeyPaths(value);
+
+    for (const ref of allRefs) {
+      const variable = getNodeScope(node).available.getByKeyPath(ref);
+      if (!variable) {
+        return {
+          level: FeedbackLevel.Error,
+          message: unknownVariableMessage,
+        };
+      }
+    }
+  }
+
+  return undefined;
+}