@nocobase/flow-engine 2.0.0-alpha.10

package/src/runjs-context/snippets/scene/detail/copy-to-clipboard.snippet.ts

@@ -0,0 +1,45 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext],
+  prefix: 'sn-jsf-copy',
+  label: 'Display text field with copy button',
+  description: 'Render the text field value with a copy-to-clipboard button',
+  locales: {
+    'zh-CN': {
+      label: '将文本字段显示为复制按钮',
+      description: '展示字段值并提供快捷复制到剪贴板的按钮',
+    },
+  },
+  content: `
+const text = String(ctx.value ?? '');
+ctx.element.innerHTML = '<a class="nb-copy" style="cursor:pointer;color:#1677ff">' +
+  ctx.t('Copy') + '</a>';
+
+ctx.element.querySelector('.nb-copy')?.addEventListener('click', async () => {
+  if (navigator?.clipboard?.writeText) {
+    await navigator.clipboard.writeText(text);
+  } else {
+    const ta = document.createElement('textarea');
+    ta.value = text;
+    document.body.appendChild(ta);
+    ta.select();
+    document.execCommand('copy');
+    document.body.removeChild(ta);
+  }
+  ctx.message.success(ctx.t('Copied'));
+});
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/detail/format-number.snippet.ts

@@ -0,0 +1,32 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-num',
+  label: 'Display number field as localized number',
+  description: 'Format numeric values with locale-aware separators before rendering',
+  locales: {
+    'zh-CN': {
+      label: '将数字字段显示为本地化格式',
+      description: '按本地化格式输出数值',
+    },
+  },
+  content: `
+// Format number using locale
+const n = Number(ctx.value ?? 0);
+ctx.element.innerHTML = String(Number.isFinite(n) ? n.toLocaleString() : ctx.value ?? '');
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/detail/innerHTML-value.snippet.ts

@@ -0,0 +1,31 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-value',
+  label: 'Display text field as highlighted text',
+  description: 'Render the current text field value with simple highlight styling',
+  locales: {
+    'zh-CN': {
+      label: '将文本字段显示为高亮文本',
+      description: '将字段值写入容器并添加高亮样式',
+    },
+  },
+  content: `
+const v = String(ctx.value ?? '');
+ctx.element.innerHTML = \`<span class="nb-js-field-value" style="color:#1890ff;font-weight:600">\${v}</span>\`;
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/detail/percentage-bar.snippet.ts

@@ -0,0 +1,63 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-percent',
+  label: 'Display number field as percentage bar',
+  description: 'Render numeric values as a percentage progress bar',
+  locales: {
+    'zh-CN': {
+      label: '将数字字段显示为百分比进度条',
+      description: '将数字格式化为百分比并显示进度条',
+    },
+  },
+  content: `
+const value = Number(ctx.value ?? 0);
+
+if (!Number.isFinite(value)) {
+  ctx.element.innerHTML = '-';
+  return;
+}
+
+// Ensure value is between 0 and 100
+const percent = Math.max(0, Math.min(100, value));
+
+// Color based on value
+const getColor = (val) => {
+  if (val >= 80) return '#52c41a';
+  if (val >= 50) return '#faad14';
+  return '#f5222d';
+};
+
+const color = getColor(percent);
+
+ctx.element.innerHTML = \`
+  <div style="display: flex; align-items: center; gap: 8px;">
+    <div style="flex: 1; height: 8px; background: #f0f0f0; border-radius: 4px; overflow: hidden;">
+      <div style="
+        width: \${percent}%;
+        height: 100%;
+        background: \${color};
+        transition: width 0.3s ease;
+      "></div>
+    </div>
+    <span style="color: \${color}; font-weight: 500; min-width: 45px; text-align: right;">
+      \${percent.toFixed(1)}%
+    </span>
+  </div>
+\`;
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/detail/relative-time.snippet.ts

@@ -0,0 +1,61 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext],
+  prefix: 'sn-jsf-relative-time',
+  label: 'Display date field as relative time',
+  description: 'Render date values as “3 days ago”, “just now”, etc.',
+  locales: {
+    'zh-CN': {
+      label: '将日期字段显示为相对时间',
+      description: '将日期显示为“3天前”、“刚刚”等相对时间',
+    },
+  },
+  content: `
+const formatRelativeTime = (date) => {
+  const now = new Date();
+  const diff = now - new Date(date);
+  const seconds = Math.floor(diff / 1000);
+  const minutes = Math.floor(seconds / 60);
+  const hours = Math.floor(minutes / 60);
+  const days = Math.floor(hours / 24);
+  const months = Math.floor(days / 30);
+  const years = Math.floor(days / 365);
+
+  if (seconds < 60) return ctx.t('just now');
+  if (minutes < 60) return ctx.t('{{count}} minutes ago', { count: minutes });
+  if (hours < 24) return ctx.t('{{count}} hours ago', { count: hours });
+  if (days < 30) return ctx.t('{{count}} days ago', { count: days });
+  if (months < 12) return ctx.t('{{count}} months ago', { count: months });
+  return ctx.t('{{count}} years ago', { count: years });
+};
+
+const dateStr = ctx.value;
+if (!dateStr) {
+  ctx.element.innerHTML = '-';
+  return;
+}
+
+const relativeTime = formatRelativeTime(dateStr);
+const fullDate = new Date(dateStr).toLocaleString();
+
+ctx.element.innerHTML = \`
+  <span title="\${fullDate}" style="cursor: help; color: #666;">
+    \${relativeTime}
+  </span>
+\`;
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/detail/status-tag.snippet.ts

@@ -0,0 +1,55 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSFieldRunJSContext } from '../../../contexts/JSFieldRunJSContext';
+import { FormJSFieldItemRunJSContext } from '../../../contexts/FormJSFieldItemRunJSContext';
+import { JSColumnRunJSContext } from '../../../contexts/JSColumnRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSFieldRunJSContext, FormJSFieldItemRunJSContext, JSColumnRunJSContext],
+  scenes: ['detail', 'table'],
+  prefix: 'sn-jsf-status-tag',
+  label: 'Display status field as colored tag',
+  description: 'Display status values using colored tags',
+  locales: {
+    'zh-CN': {
+      label: '将状态字段显示为彩色标签',
+      description: '根据状态值显示不同颜色的标签',
+    },
+  },
+  content: `
+const statusColors = {
+  active: 'green',
+  pending: 'orange',
+  inactive: 'gray',
+  error: 'red',
+  success: 'blue',
+};
+
+const status = String(ctx.value || 'unknown');
+const color = statusColors[status] || 'default';
+
+ctx.element.innerHTML = \`
+  <span style="
+    display: inline-block;
+    padding: 2px 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    background-color: var(--\${color}-1, #f0f0f0);
+    color: var(--\${color}-6, #333);
+    border: 1px solid var(--\${color}-3, #d9d9d9);
+  ">
+    \${ctx.t(status)}
+  </span>
+\`;
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/calculate-total.snippet.ts

@@ -0,0 +1,44 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-link-calc',
+  label: 'Calculate total price (quantity × price)',
+  description: 'Automatically calculate total when quantity or unit price changes',
+  locales: {
+    'zh-CN': {
+      label: '计算总价（数量 × 单价）',
+      description: '当数量或单价变化时自动计算总价',
+    },
+  },
+  content: `
+// Get quantity and unit price from current record
+const quantity = Number(ctx.record?.quantity) || 0;
+const unitPrice = Number(ctx.record?.unitPrice) || 0;
+const total = quantity * unitPrice;
+
+// Find and update the 'totalPrice' field
+const items = ctx.model?.subModels?.grid?.subModels?.items;
+const candidates = Array.isArray(items) ? items : Array.from(items?.values?.() || items || []);
+
+const totalField = candidates.find((item) => item?.props?.name === 'totalPrice');
+
+if (totalField) {
+  totalField.setProps({ value: total.toFixed(2) });
+} else {
+  console.warn('[Form snippet] totalPrice field not found');
+}
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/cascade-select.snippet.ts

@@ -0,0 +1,62 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-link-cascade',
+  label: 'Cascade select (load child roles)',
+  description: 'Load child roles based on the selected parent role',
+  locales: {
+    'zh-CN': {
+      label: '级联选择（加载子角色）',
+      description: '根据选择的父角色加载对应子角色',
+    },
+  },
+  content: `
+// Get selected parent role (adjust field name to match your form)
+const parentRoleId = ctx.record?.parentRole?.id;
+
+if (!parentRoleId) {
+  return;
+}
+
+const res = await ctx.api.request({
+  url: 'roles:list',
+  method: 'get',
+  params: {
+    pageSize: 100,
+    filter: {
+      parentId: parentRoleId,
+    },
+  },
+});
+
+const childRoles = res?.data?.data || [];
+
+const items = ctx.model?.subModels?.grid?.subModels?.items;
+const candidates = Array.isArray(items) ? items : Array.from(items?.values?.() || items || []);
+
+const roleField = candidates.find((item) => item?.props?.name === 'role');
+
+if (roleField) {
+  roleField.setProps({
+    dataSource: childRoles.map((role) => ({
+      value: role.id,
+      label: role.name,
+    })),
+    value: undefined,
+  });
+}
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/conditional-required.snippet.ts

@@ -0,0 +1,45 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-link-require',
+  label: 'Conditional required field',
+  description: "Make a field required based on another field's value",
+  locales: {
+    'zh-CN': {
+      label: '条件必填',
+      description: '根据另一个字段的值动态设置必填状态',
+    },
+  },
+  content: `
+// When 'needsApproval' is true, make 'approver' field required
+const needsApproval = ctx.record?.needsApproval;
+
+const items = ctx.model?.subModels?.grid?.subModels?.items;
+const candidates = Array.isArray(items) ? items : Array.from(items?.values?.() || items || []);
+
+const approverField = candidates.find((item) => item?.props?.name === 'approver');
+
+if (approverField) {
+  approverField.setProps({
+    required: !!needsApproval,
+    // Also toggle visibility if needed
+    // display: needsApproval ? 'visible' : 'hidden',
+  });
+} else {
+  console.warn('[Form snippet] approver field not found');
+}
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/copy-field-values.snippet.ts

@@ -0,0 +1,55 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-link-copy',
+  label: 'Copy value from another field',
+  description: 'Copy value from one field to another when checkbox is checked',
+  locales: {
+    'zh-CN': {
+      label: '复制字段值',
+      description: '勾选复选框时，将一个字段的值复制到另一个字段',
+    },
+  },
+  content: `
+// When 'sameAsAbove' is checked, copy billing address to shipping address
+const sameAsAbove = ctx.record?.sameAsAbove;
+
+if (!sameAsAbove) {
+  return;
+}
+
+const items = ctx.model?.subModels?.grid?.subModels?.items;
+const candidates = Array.isArray(items) ? items : Array.from(items?.values?.() || items || []);
+
+// Source and target field mappings
+const fieldMappings = [
+  { from: 'billingAddress', to: 'shippingAddress' },
+  { from: 'billingCity', to: 'shippingCity' },
+  { from: 'billingZipCode', to: 'shippingZipCode' },
+];
+
+fieldMappings.forEach(({ from, to }) => {
+  const sourceValue = ctx.record?.[from];
+  const targetField = candidates.find((item) => item?.props?.name === to);
+
+  if (targetField) {
+    targetField.setProps({ value: sourceValue });
+  }
+});
+
+ctx.message?.success?.(ctx.t('Address copied successfully'));
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/render-basic.snippet.ts

@@ -0,0 +1,39 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-jsitem-basic',
+  label: 'Render form item',
+  description: 'Render custom content inside a form item container',
+  locales: {
+    'zh-CN': {
+      label: '渲染表单项',
+      description: '在表单项容器中渲染自定义内容',
+    },
+  },
+  content:
+    `
+ctx.element.innerHTML = ` +
+    '`' +
+    `
+  <div style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; line-height: 1.6;">
+    <h3 style="color: #1890ff; margin: 0 0 12px 0; font-size: 18px; font-weight: 600;">\${ctx.t('JS Item')}</h3>
+    <div style="color:#555">\${ctx.t('This area is rendered by your JavaScript code.')}</div>
+  </div>
+` +
+    '`' +
+    `;
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/set-disabled.snippet.ts

@@ -0,0 +1,50 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-link-disable',
+  label: 'Set disabled',
+  description: 'Enable or disable another field in linkage scripts',
+  locales: {
+    'zh-CN': {
+      label: '设置禁用',
+      description: '在联动脚本中启用或禁用字段',
+    },
+  },
+  content: `
+const targetFieldUid = 'FIELD_UID_OR_NAME';
+const disabled = true;
+
+const items = ctx.model?.subModels?.grid?.subModels?.items;
+const candidates = Array.isArray(items)
+  ? items
+  : Array.from(items?.values?.() || items || []);
+const fieldModel =
+  candidates.find((item) => item?.uid === targetFieldUid) ||
+  candidates.find((item) => item?.props?.name === targetFieldUid);
+
+if (!fieldModel) {
+  ctx.message?.warning?.(ctx.t('Field {{name}} not found', { name: targetFieldUid }));
+  return;
+}
+
+fieldModel.setProps({ disabled });
+ctx.message?.success?.(
+  ctx.t(disabled ? 'Disabled field {{name}}' : 'Enabled field {{name}}', {
+    name: fieldModel?.props?.label || targetFieldUid,
+  }),
+);
+`,
+};
+
+export default snippet;

package/src/runjs-context/snippets/scene/form/set-field-value.snippet.ts

@@ -0,0 +1,49 @@
+/**
+ * This file is part of the NocoBase (R) project.
+ * Copyright (c) 2020-2024 NocoBase Co., Ltd.
+ * Authors: NocoBase Team.
+ *
+ * This project is dual-licensed under AGPL-3.0 and NocoBase Commercial License.
+ * For more information, please refer to: https://www.nocobase.com/agreement.
+ */
+
+import type { SnippetModule } from '../../types';
+import { JSItemRunJSContext } from '../../../contexts/JSItemRunJSContext';
+
+const snippet: SnippetModule = {
+  contexts: [JSItemRunJSContext],
+  prefix: 'sn-link-set',
+  label: 'Set field value',
+  description: 'Programmatically update another field in linkage scripts',
+  locales: {
+    'zh-CN': {
+      label: '设置字段值',
+      description: '在联动脚本中为其他字段设置值',
+    },
+  },
+  content: `
+// Update another field in the same form/block
+const targetFieldUid = 'FIELD_UID_OR_NAME';
+const nextValue = ctx.record?.status ?? ctx.t('Updated value');
+
+const items = ctx.model?.subModels?.grid?.subModels?.items;
+const candidates = Array.isArray(items)
+  ? items
+  : Array.from(items?.values?.() || items || []);
+const fieldModel =
+  candidates.find((item) => item?.uid === targetFieldUid) ||
+  candidates.find((item) => item?.props?.name === targetFieldUid);
+
+if (!fieldModel) {
+  ctx.message?.warning?.(ctx.t('Field {{name}} not found', { name: targetFieldUid }));
+  return;
+}
+
+fieldModel.setProps({ value: nextValue });
+ctx.message?.success?.(
+  ctx.t('Updated field {{name}}', { name: fieldModel?.props?.label || targetFieldUid }),
+);
+`,
+};
+
+export default snippet;