No commit message

src/SaForm/layout/property/dialog.tsx

@@ -2,6 +2,7 @@ import { computed, defineComponent, h, ref, shallowRef } from 'vue'
 import { NButton, NInput, NModal } from 'naive-ui'
 import { cloneDeep, isEqual } from 'lodash-es'
 import { getPluginValue } from '../../utils/plugin'
+import { pluginValueFilter } from './hooks/filter'
 import type { DefineComponent, PropType, Ref } from 'vue'
 import type { SaController } from '../../config'
 import type { BasicGraph } from '../../graph'
@@ -88,9 +89,20 @@ export default defineComponent({
       dialogVisible.value = false
     }
 
-    const displayContent = computed(() =>
-      props.plugin.filter?.(getPluginValue(props.graph, props.plugin))
-    )
+    const displayContent = computed(() => {
+      try {
+        return pluginValueFilter(
+          getPluginValue(props.graph, props.plugin),
+          props.plugin,
+          props.graph.selected[0],
+          props.graph
+        )
+      } catch (err) {
+        console.error(err)
+
+        return 'NaN'
+      }
+    })
 
     return () => (
       <div class="dialog-container">

src/SaForm/layout/property/hooks/filter.ts

@@ -0,0 +1,16 @@
+import type { BasicElement } from '@/SaForm/element'
+import type { BasicGraph } from '@/SaForm/graph'
+import type { SaPlugin } from '@/SaForm/plugin'
+
+export const pluginValueFilter = <A, B = any>(
+  value: A,
+  plugin: SaPlugin,
+  element: BasicElement,
+  graph: BasicGraph
+): B => {
+  const $value: any = plugin.filter
+    ? plugin.filter(value, element, graph)
+    : value
+
+  return $value
+}

src/SaForm/layout/property/hooks/value.ts

@@ -0,0 +1,45 @@
+import { cloneDeep } from 'lodash-es'
+import type { BasicElement } from '@/SaForm/element'
+import type { BasicGraph } from '@/SaForm/graph'
+import type { SaPlugin } from '@/SaForm/plugin'
+
+export type BeforeValueChangeReturn<A> = {
+  value: A
+  error: string
+}
+
+export type ValueChangeHookArgs = {
+  value: unknown
+  plugin: SaPlugin
+  element: BasicElement
+  graph: BasicGraph
+}
+export type ValueChangeHook = {
+  predicate: (args: ValueChangeHookArgs) => boolean
+  hook: (args: ValueChangeHookArgs) => void
+}
+
+export const beforeValueChange = <A, B>(
+  value: A,
+  plugin: SaPlugin,
+  element: BasicElement,
+  graph: BasicGraph
+): BeforeValueChangeReturn<B> => {
+  const $error = ''
+  const $value: any = cloneDeep(value)
+
+  const hookArgs: ValueChangeHookArgs = { value, plugin, graph, element }
+
+  return {
+    value: $value,
+    error: $error,
+  }
+}
+
+export const afterValueChange = <A>(
+  value: A,
+  plugin: SaPlugin,
+  graph: BasicGraph
+): void => {
+  // after value change
+}

src/SaForm/layout/property/item.tsx

@@ -13,12 +13,15 @@ import { isEqual } from 'lodash-es'
 import { SaPluginType, isGroupPlugin } from '../../plugin'
 import { useClazs } from '../../utils/class'
 import SaDialog from './dialog'
+import { pluginValueFilter } from './hooks/filter'
+import { afterValueChange, beforeValueChange } from './hooks/value'
 import type { PropType, VNode } from 'vue'
 import type { SaPlugin } from '../../plugin'
 
 import type { BasicGraph } from '../../graph'
 import type { SaController } from '../../config'
 import { isElementAttribute } from '@/SaForm/utils/element'
+import { isNullish } from '@/SaForm/utils/function'
 
 export default defineComponent({
   name: 'ControllerItem',
@@ -55,12 +58,14 @@ export default defineComponent({
     })
 
     const internalMoelValue = ref<any>()
+    const error = ref('123')
 
     let colorTemp = modelValue.value
 
     watch(
       () => selected.value.attrs.id,
       () => {
+        error.value = ''
         internalMoelValue.value = modelValue.value
         colorTemp = modelValue.value
       },
@@ -82,7 +87,21 @@ export default defineComponent({
     )
 
     const handlePluginValueChange = (value: unknown) => {
-      props.controller.valueChange(props.plugin.attr, value, props.graph)
+      const { value: modifiedValue, error: $error } = beforeValueChange(
+        value,
+        props.plugin,
+        selected.value,
+        props.graph
+      )
+      error.value = $error
+      if ($error) return
+
+      props.controller.valueChange(
+        props.plugin.attr,
+        modifiedValue,
+        props.graph
+      )
+      afterValueChange(value, props.plugin, props.graph)
     }
     const debouncedHandlePluginValueChange = useDebounceFn(
       handlePluginValueChange,
@@ -95,19 +114,39 @@ export default defineComponent({
 
     const createPluginContent = (): VNode => {
       const plugin = props.plugin
-      const filteredValue = plugin.filter
-        ? plugin.filter(internalMoelValue.value)
-        : internalMoelValue.value
+      const internalDisabled = isNullish(plugin.disabled)
+        ? false
+        : typeof plugin.disabled === 'boolean'
+        ? plugin.disabled
+        : plugin.disabled(selected.value)
+      const filteredValue = pluginValueFilter(
+        internalMoelValue.value,
+        props.plugin,
+        selected.value,
+        props.graph
+      )
 
       switch (plugin.type) {
         case SaPluginType.Input: {
           const Input = (
             <NInput
               class="sa-plugin"
+              type="textarea"
               value={filteredValue}
-              onUpdateValue={onInternalValueUpdate}
-              disabled={plugin.disabled ?? false}
-              placeholder=""
+              onUpdate:value={onInternalValueUpdate}
+              disabled={internalDisabled}
+              clearable={props.plugin.clearable}
+              error={error.value}
+              status={error.value ? 'error' : undefined}
+              allowInput={props.plugin.allowInput}
+              placeholder={''}
+              autosize={{
+                minRows: 1,
+              }}
+              v-slots={{
+                prefix: () => props.plugin.prefix,
+                suffix: () => props.plugin.suffix,
+              }}
             />
           )
 
@@ -126,11 +165,18 @@ export default defineComponent({
           const Input = (
             <NInputNumber
               class="sa-plugin w-full"
-              showButton={false}
+              showButton={plugin.showButton ?? true}
+              clearable={plugin.clearable ?? false}
               value={filteredValue}
-              onUpdateValue={onInternalValueUpdate}
-              disabled={plugin.disabled ?? false}
-              placeholder=""
+              onUpdate:value={onInternalValueUpdate}
+              disabled={internalDisabled}
+              min={plugin.min}
+              max={plugin.max}
+              placeholder={''}
+              v-slots={{
+                prefix: () => props.plugin.prefix,
+                suffix: () => props.plugin.suffix,
+              }}
             />
           )
 
@@ -154,7 +200,7 @@ export default defineComponent({
               filterable
               placeholder=""
               consistentMenuWidth={false}
-              disabled={plugin.disabled ?? false}
+              disabled={internalDisabled}
               options={plugin.options ?? []}
             />
           )
@@ -222,11 +268,13 @@ export default defineComponent({
                   onUpdateValue={updateValue}
                   onUpdateShow={updateShow}
                   onConfirm={onConfirm}
+                  disabled={internalDisabled}
                 />
                 <NButton
                   type="warning"
                   secondary
                   class="color-picker-button"
+                  disabled={internalDisabled}
                   onClick={() => handlePluginValueChange('')}
                 >
                   Reset

src/SaForm/plugin.ts

@@ -1,4 +1,5 @@
-import type { ElementType } from './element'
+import type { BasicGraph } from './graph'
+import type { BasicElement, ElementType } from './element'
 
 /** property controller type */
 export enum SaPluginType {
@@ -29,15 +30,38 @@ export interface SaPlugin extends SaPluginBasic {
     component: string
     /** dialog title, set plugin label in default */
     title?: string
+    /** default is `center` */
+    position?: 'center' | 'bottom-right'
   }
+  /** plugin component */
+  component?: string
   /** options for `Select` */
   options?: SaPluginOption[]
   /** value filter for display format data */
-  filter?: (value: any) => string
+  filter?: (value: any, element: BasicElement, graph: BasicGraph) => string
+  /** plugin visiable option */
+  visiable?: (value: any) => Promise<boolean> | boolean
   /** plugin disable option */
-  disabled?: boolean
+  disabled?: boolean | ((a: any) => boolean)
+  /** plugin displayed option */
+  hidden?: boolean | ((a: any, graph: BasicGraph) => boolean)
   /** displayed inline, only works in `SaGroupPlugin` */
   inline?: boolean
+  filterable?: boolean
+  clearable?: boolean
+  /** default value if value is undefined */
+  default?: any
+  /** show button on input number, default is `true` */
+  showButton?: boolean
+  /** range for input number  */
+  min?: number
+  max?: number
+  /** prefix for input */
+  prefix?: string
+  /** suffix for input */
+  suffix?: string
+  /** limit input format */
+  allowInput?: (a: any) => boolean
 }
 export interface SaGroupPlugin extends SaPluginBasic {
   /** group collapsed, default is `true` */

src/SaForm/utils/function.ts

@@ -0,0 +1,2 @@
+export const isNullish = (value: unknown): value is null | undefined =>
+  value === null || value === undefined