@flowgram-vue/form-materials 0.2.0

package/src/shared/polyfill-create-root/index.ts

@@ -0,0 +1,38 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { createApp, type App, type VNode } from 'vue';
+
+export interface IPolyfillRoot {
+  render(children: VNode): void;
+  unmount(): void;
+}
+
+let unstableCreateRoot = (dom: HTMLElement): IPolyfillRoot => {
+  let app: App | null = null;
+  return {
+    render(children: VNode) {
+      if (app) {
+        app.unmount();
+      }
+      app = createApp({
+        render: () => children,
+      });
+      app.mount(dom);
+    },
+    unmount() {
+      app?.unmount();
+      app = null;
+    },
+  };
+};
+
+export function polyfillCreateRoot(dom: HTMLElement): IPolyfillRoot {
+  return unstableCreateRoot(dom);
+}
+
+export function unstableSetCreateRoot(createRoot: (dom: HTMLElement) => IPolyfillRoot) {
+  unstableCreateRoot = createRoot;
+}

package/src/ui/fg-button.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+defineProps<{
+  disabled?: boolean;
+  borderless?: boolean;
+}>();
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="fg-btn"
+    :class="{ borderless }"
+    :disabled="disabled"
+    @click="emit('click', $event)"
+  >
+    <slot />
+  </button>
+</template>

package/src/ui/fg-cascader.vue

@@ -0,0 +1,92 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref, type VNode } from 'vue';
+
+import type { FgCascaderOption } from './types';
+
+const props = withDefaults(
+  defineProps<{
+    options?: FgCascaderOption[];
+    value?: string[];
+    disabled?: boolean;
+    triggerRender?: () => VNode;
+  }>(),
+  { options: () => [] }
+);
+
+const emit = defineEmits<{
+  change: [value: string[]];
+}>();
+
+const open = ref(false);
+const rootRef = ref<HTMLElement | null>(null);
+const path = ref<string[]>(props.value || []);
+
+const level0 = computed(() => props.options);
+const level1 = computed(() => {
+  const current = props.options.find((item) => item.value === path.value[0]);
+  return current?.children || [];
+});
+
+const onDocClick = (event: MouseEvent) => {
+  if (rootRef.value && !rootRef.value.contains(event.target as Node)) {
+    open.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener('mousedown', onDocClick));
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick));
+
+const pick = (level: number, value: string) => {
+  const next = [...path.value];
+  next[level] = value;
+  next.splice(level + 1);
+  path.value = next;
+  const option = (level === 0 ? level0.value : level1.value).find((item) => item.value === value);
+  if (!option?.children?.length) {
+    emit('change', next);
+    open.value = false;
+  }
+};
+</script>
+
+<template>
+  <div ref="rootRef" class="fg-select-wrap">
+    <div @click="!disabled && (open = !open)">
+      <component :is="triggerRender" v-if="triggerRender" />
+      <button v-else type="button" class="fg-select" :disabled="disabled">
+        {{ (value || []).join(' / ') }}
+      </button>
+    </div>
+    <div v-if="open" class="fg-cascader-dropdown" style="display: flex; min-width: 240px">
+      <div style="flex: 1">
+        <button
+          v-for="option in level0"
+          :key="option.value"
+          type="button"
+          class="fg-cascader-option"
+          @click="pick(0, option.value)"
+        >
+          <component :is="option.label" v-if="typeof option.label !== 'string'" />
+          <span v-else>{{ option.label }}</span>
+        </button>
+      </div>
+      <div v-if="level1.length" style="flex: 1; border-left: 1px solid #e5e6eb">
+        <button
+          v-for="option in level1"
+          :key="option.value"
+          type="button"
+          class="fg-cascader-option"
+          @click="pick(1, option.value)"
+        >
+          <component :is="option.label" v-if="typeof option.label !== 'string'" />
+          <span v-else>{{ option.label }}</span>
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/ui/fg-checkbox.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+defineProps<{
+  checked?: boolean;
+  disabled?: boolean;
+}>();
+
+const emit = defineEmits<{
+  change: [checked: boolean];
+}>();
+</script>
+
+<template>
+  <input
+    class="fg-checkbox"
+    type="checkbox"
+    :checked="checked"
+    :disabled="disabled"
+    @change="emit('change', ($event.target as HTMLInputElement).checked)"
+  />
+</template>

package/src/ui/fg-icon-button.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { CSSProperties, VNode } from 'vue';
+
+defineProps<{
+  disabled?: boolean;
+  icon?: VNode;
+  style?: CSSProperties;
+}>();
+
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+}>();
+</script>
+
+<template>
+  <button
+    type="button"
+    class="fg-icon-btn"
+    :disabled="disabled"
+    :style="style"
+    @click="emit('click', $event)"
+  >
+    <component :is="icon" v-if="icon" />
+    <slot />
+  </button>
+</template>

package/src/ui/fg-input.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, type CSSProperties } from 'vue';
+
+const props = defineProps<{
+  modelValue?: string | number;
+  value?: string | number;
+  disabled?: boolean;
+  placeholder?: string;
+  style?: CSSProperties;
+  type?: string;
+  error?: boolean;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+  blur: [event: FocusEvent];
+  focus: [event: FocusEvent];
+}>();
+
+const innerValue = computed(() =>
+  props.modelValue !== undefined ? props.modelValue : props.value
+);
+
+const onInput = (event: Event) => {
+  const next = (event.target as HTMLInputElement).value;
+  emit('update:modelValue', next);
+  emit('change', next);
+};
+</script>
+
+<template>
+  <input
+    class="fg-input"
+    :class="{ error }"
+    :type="type || 'text'"
+    :value="innerValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :style="style"
+    @input="onInput"
+    @blur="emit('blur', $event)"
+    @focus="emit('focus', $event)"
+  />
+</template>

package/src/ui/fg-modal.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { I18n } from '@flowgram-vue/i18n';
+
+defineProps<{
+  visible?: boolean;
+  title?: string;
+  okText?: string;
+  cancelText?: string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+  confirm: [];
+}>();
+</script>
+
+<template>
+  <div v-if="visible" class="fg-modal-mask" @click.self="emit('close')">
+    <div class="fg-modal">
+      <div class="fg-modal-title">{{ title }}</div>
+      <slot />
+      <div class="fg-modal-actions">
+        <button type="button" class="fg-btn" @click="emit('close')">
+          {{ cancelText || I18n.t('Cancel') }}
+        </button>
+        <button type="button" class="fg-btn" @click="emit('confirm')">
+          {{ okText || I18n.t('Generate') }}
+        </button>
+      </div>
+    </div>
+  </div>
+</template>

package/src/ui/fg-popover.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { ref } from 'vue';
+
+const hover = ref(false);
+</script>
+
+<template>
+  <div class="fg-popover" @mouseenter="hover = true" @mouseleave="hover = false">
+    <slot />
+    <div v-if="hover" class="fg-popover-content">
+      <slot name="content" />
+    </div>
+  </div>
+</template>

package/src/ui/fg-select.vue

@@ -0,0 +1,81 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+
+import type { FgSelectOption } from './types';
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: string | number;
+    value?: string | number;
+    options?: FgSelectOption[];
+    disabled?: boolean;
+    placeholder?: string;
+    compact?: boolean;
+  }>(),
+  { options: () => [] }
+);
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string | number];
+  change: [value: string | number];
+}>();
+
+const open = ref(false);
+const rootRef = ref<HTMLElement | null>(null);
+const innerValue = computed(() =>
+  props.modelValue !== undefined ? props.modelValue : props.value
+);
+
+const selected = computed(() => props.options.find((item) => item.value === innerValue.value));
+
+const onDocClick = (event: MouseEvent) => {
+  if (rootRef.value && !rootRef.value.contains(event.target as Node)) {
+    open.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener('mousedown', onDocClick));
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick));
+
+const select = (option: FgSelectOption) => {
+  if (option.disabled) {
+    return;
+  }
+  emit('update:modelValue', option.value);
+  emit('change', option.value);
+  open.value = false;
+};
+</script>
+
+<template>
+  <div ref="rootRef" class="fg-select-wrap">
+    <button
+      type="button"
+      class="fg-select"
+      :disabled="disabled"
+      @click="!disabled && (open = !open)"
+    >
+      <slot name="trigger" :value="innerValue" :option="selected">
+        {{ selected?.label || placeholder || '' }}
+      </slot>
+    </button>
+    <div v-if="open" class="fg-cascader-dropdown">
+      <button
+        v-for="option in options"
+        :key="String(option.value)"
+        type="button"
+        class="fg-select-option"
+        :disabled="option.disabled"
+        @click="select(option)"
+      >
+        <component :is="option.label" v-if="typeof option.label !== 'string'" />
+        <span v-else>{{ option.label }}</span>
+      </button>
+    </div>
+  </div>
+</template>

package/src/ui/fg-tag.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import type { VNode } from 'vue';
+
+import { IconClose } from './icons';
+
+defineProps<{
+  closable?: boolean;
+  color?: 'amber' | 'white' | 'default';
+  prefixIcon?: VNode | string;
+}>();
+
+const emit = defineEmits<{
+  close: [];
+}>();
+</script>
+
+<template>
+  <span class="fg-tag" :class="color || 'default'">
+    <img
+      v-if="typeof prefixIcon === 'string'"
+      :src="prefixIcon"
+      width="12"
+      height="12"
+      alt=""
+    />
+    <component :is="prefixIcon" v-else-if="prefixIcon" />
+    <slot />
+    <button v-if="closable" type="button" class="fg-tag-close" @click.stop="emit('close')">
+      <IconClose />
+    </button>
+  </span>
+</template>

package/src/ui/fg-textarea.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed } from 'vue';
+
+const props = defineProps<{
+  modelValue?: string | number;
+  value?: string | number;
+  disabled?: boolean;
+  placeholder?: string;
+  rows?: number;
+}>();
+
+const emit = defineEmits<{
+  'update:modelValue': [value: string];
+  change: [value: string];
+}>();
+
+const innerValue = computed(() =>
+  props.modelValue !== undefined ? props.modelValue : props.value
+);
+
+const onInput = (event: Event) => {
+  const next = (event.target as HTMLTextAreaElement).value;
+  emit('update:modelValue', next);
+  emit('change', next);
+};
+</script>
+
+<template>
+  <textarea
+    class="fg-textarea"
+    :value="innerValue"
+    :disabled="disabled"
+    :placeholder="placeholder"
+    :rows="rows || 2"
+    @input="onInput"
+  />
+</template>

package/src/ui/fg-tree-nodes.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, type VNode } from 'vue';
+
+import type { FgTreeNode } from './types';
+
+defineProps<{
+  nodes?: FgTreeNode[];
+}>();
+
+const emit = defineEmits<{
+  pick: [node: FgTreeNode];
+}>();
+
+const renderIcon = (icon?: VNode | string) => {
+  if (!icon) {
+    return null;
+  }
+  if (typeof icon === 'string') {
+    return h('img', { src: icon, width: 12, height: 12, alt: '', style: 'margin-right: 4px' });
+  }
+  return icon;
+};
+</script>
+
+<template>
+  <div>
+    <div v-for="node in nodes || []" :key="node.key">
+      <button
+        type="button"
+        class="fg-tree-node"
+        :class="{ disabled: node.disabled }"
+        :disabled="node.disabled"
+        @click="emit('pick', node)"
+      >
+        <component :is="() => renderIcon(node.icon)" />
+        <span>{{ node.label }}</span>
+      </button>
+      <div v-if="node.children?.length" class="fg-tree-children">
+        <FgTreeNodes :nodes="node.children" @pick="emit('pick', $event)" />
+      </div>
+    </div>
+  </div>
+</template>

package/src/ui/fg-tree-select.vue

@@ -0,0 +1,86 @@
+<script setup lang="ts">
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { computed, onBeforeUnmount, onMounted, ref, type VNode } from 'vue';
+
+import FgTreeNodes from './fg-tree-nodes.vue';
+import type { FgTreeNode } from './types';
+import { IconChevronDown } from './icons';
+
+const props = withDefaults(
+  defineProps<{
+    treeData?: FgTreeNode[];
+    value?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    error?: boolean;
+    triggerRender?: () => VNode;
+  }>(),
+  { treeData: () => [] }
+);
+
+const emit = defineEmits<{
+  change: [value: string[] | undefined, node?: FgTreeNode];
+}>();
+
+const open = ref(false);
+const rootRef = ref<HTMLElement | null>(null);
+
+const findNode = (nodes: FgTreeNode[], key: string | undefined): FgTreeNode | undefined => {
+  if (!key) {
+    return undefined;
+  }
+  for (const node of nodes) {
+    if (node.key === key || node.value === key) {
+      return node;
+    }
+    const child = findNode(node.children || [], key);
+    if (child) {
+      return child;
+    }
+  }
+  return undefined;
+};
+
+const selected = computed(() => findNode(props.treeData, props.value));
+
+const onDocClick = (event: MouseEvent) => {
+  if (rootRef.value && !rootRef.value.contains(event.target as Node)) {
+    open.value = false;
+  }
+};
+
+onMounted(() => document.addEventListener('mousedown', onDocClick));
+onBeforeUnmount(() => document.removeEventListener('mousedown', onDocClick));
+
+const pick = (node: FgTreeNode) => {
+  if (node.disabled) {
+    return;
+  }
+  emit('change', node.keyPath || node.key.split('.'), node);
+  open.value = false;
+};
+</script>
+
+<template>
+  <div ref="rootRef" class="fg-tree-select" :class="{ error }">
+    <div
+      class="fg-tree-select-trigger"
+      :class="{ disabled }"
+      @click="!disabled && (open = !open)"
+    >
+      <slot name="selected" :option="selected">
+        <component :is="triggerRender" v-if="triggerRender" />
+        <span v-else-if="selected" class="fg-tree-select-value">{{ selected.label }}</span>
+        <span v-else class="fg-tree-select-placeholder">{{ placeholder }}</span>
+      </slot>
+      <IconChevronDown />
+    </div>
+    <div v-if="open" class="fg-tree-select-dropdown">
+      <FgTreeNodes :nodes="treeData" @pick="pick" />
+    </div>
+  </div>
+</template>

package/src/ui/icons.ts

@@ -0,0 +1,60 @@
+/**
+ * Copyright (c) 2025 Bytedance Ltd. and/or its affiliates
+ * SPDX-License-Identifier: MIT
+ */
+
+import { h, type VNode } from 'vue';
+
+function svg(pathD: string, viewBox = '0 0 16 16'): VNode {
+  return h(
+    'svg',
+    {
+      class: 'fg-icon',
+      width: '14',
+      height: '14',
+      viewBox,
+      fill: 'none',
+      xmlns: 'http://www.w3.org/2000/svg',
+      'aria-hidden': 'true',
+    },
+    h('path', { d: pathD, fill: 'currentColor' })
+  );
+}
+
+export const IconPlus = () =>
+  svg('M8 2.5a.75.75 0 0 1 .75.75V7.25h4a.75.75 0 0 1 0 1.5h-4v4a.75.75 0 0 1-1.5 0v-4h-4a.75.75 0 0 1 0-1.5h4V3.25A.75.75 0 0 1 8 2.5Z');
+
+export const IconMinus = () => svg('M3 8a.75.75 0 0 1 .75-.75h8.5a.75.75 0 0 1 0 1.5h-8.5A.75.75 0 0 1 3 8Z');
+
+export const IconDelete = () =>
+  svg(
+    'M5.5 2.75A.75.75 0 0 1 6.25 2h3.5a.75.75 0 0 1 0 1.5h-3.5A.75.75 0 0 1 5.5 2.75ZM3 4.75A.75.75 0 0 1 3.75 4h8.5a.75.75 0 0 1 0 1.5H11.2l-.42 6.3A1.75 1.75 0 0 1 9.04 13.5H6.96a1.75 1.75 0 0 1-1.74-1.7L4.8 5.5H3.75A.75.75 0 0 1 3 4.75Z'
+  );
+
+export const IconChevronDown = () => svg('M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z');
+
+export const IconChevronRight = () => svg('M6.22 4.22a.75.75 0 0 1 1.06 0l3.25 3.25a.75.75 0 0 1 0 1.06L7.28 11.78a.75.75 0 1 1-1.06-1.06L8.94 8 6.22 5.28a.75.75 0 0 1 0-1.06Z');
+
+export const IconChevronDownStroked = IconChevronDown;
+
+export const IconIssueStroked = () =>
+  svg(
+    'M8 1.5A6.5 6.5 0 1 1 1.5 8 6.51 6.51 0 0 1 8 1.5ZM8 10a.9.9 0 1 0 0 1.8A.9.9 0 0 0 8 10Zm.75-5.25a.75.75 0 0 0-1.5 0v3.5a.75.75 0 0 0 1.5 0v-3.5Z'
+  );
+
+export const IconSetting = () =>
+  svg(
+    'M8 5.25A2.75 2.75 0 1 0 8 10.75 2.75 2.75 0 0 0 8 5.25ZM3.2 6.1 1.7 6.6a.75.75 0 0 0-.5.9l.5 1.9c.1.35.42.6.78.6l1.6.1c.2.4.45.77.75 1.1l-.4 1.55a.75.75 0 0 0 .4.85l1.8.95c.32.17.72.08.95-.2l1.05-1.25c.42.07.85.07 1.27 0l1.05 1.25c.23.28.63.37.95.2l1.8-.95a.75.75 0 0 0 .4-.85l-.4-1.55c.3-.33.55-.7.75-1.1l1.6-.1a.75.75 0 0 0 .78-.6l.5-1.9a.75.75 0 0 0-.5-.9l-1.5-.5c-.05-.43-.16-.85-.32-1.24l.85-1.4a.75.75 0 0 0-.15-.95L12.7 2.4a.75.75 0 0 0-.95-.1l-1.4.7c-.38-.2-.8-.35-1.23-.45L9 1.05A.75.75 0 0 0 8.25.4h-1.5A.75.75 0 0 0 6 1.05L5.88 2.55c-.43.1-.85.25-1.23.45l-1.4-.7a.75.75 0 0 0-.95.1L1.15 3.5a.75.75 0 0 0-.15.95l.85 1.4c-.16.39-.27.81-.32 1.24Z'
+  );
+
+export const IconExpand = () =>
+  svg('M3 3.75A.75.75 0 0 1 3.75 3h3.5a.75.75 0 0 1 0 1.5H5.56l2.72 2.72a.75.75 0 1 1-1.06 1.06L4.5 5.56v1.69a.75.75 0 0 1-1.5 0v-3.5ZM13 12.25a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1 0-1.5h1.69L7.72 8.78a.75.75 0 0 1 1.06-1.06L11.5 10.44V8.75a.75.75 0 0 1 1.5 0v3.5Z');
+
+export const IconShrink = () =>
+  svg('M7.25 3a.75.75 0 0 1 .75.75v3.5a.75.75 0 0 1-.75.75h-3.5a.75.75 0 0 1 0-1.5h1.69L2.78 4.22a.75.75 0 0 1 1.06-1.06L6.5 5.56V3.75A.75.75 0 0 1 7.25 3Zm1.5 10a.75.75 0 0 1-.75-.75v-3.5a.75.75 0 0 1 .75-.75h3.5a.75.75 0 0 1 0 1.5h-1.69l2.72 2.72a.75.75 0 1 1-1.06 1.06L9.5 10.44v1.81a.75.75 0 0 1-.75.75Z');
+
+export const IconAddChildren = () =>
+  svg('M4 2.75A.75.75 0 0 1 4.75 2h6.5a.75.75 0 0 1 0 1.5h-6.5A.75.75 0 0 1 4 2.75ZM4 8a.75.75 0 0 1 .75-.75h2.5a.75.75 0 0 1 0 1.5h-2.5A.75.75 0 0 1 4 8Zm6.25-.75a.75.75 0 0 0 0 1.5h.5V9.5a.75.75 0 0 0 1.5 0v-.75h.5a.75.75 0 0 0 0-1.5h-.5V6.5a.75.75 0 0 0-1.5 0v.75h-.5ZM4.75 12.5a.75.75 0 0 0 0 1.5h6.5a.75.75 0 0 0 0-1.5h-6.5Z');
+
+export const IconClose = () =>
+  svg('M4.22 4.22a.75.75 0 0 1 1.06 0L8 6.94l2.72-2.72a.75.75 0 1 1 1.06 1.06L9.06 8l2.72 2.72a.75.75 0 1 1-1.06 1.06L8 9.06l-2.72 2.72a.75.75 0 0 1-1.06-1.06L6.94 8 4.22 5.28a.75.75 0 0 1 0-1.06Z');