@idooel/components 0.0.2 → 0.0.3-beta.1

package/packages/models/form-model/src/index.vue

@@ -1,233 +1,354 @@
-<template>
-  <div class="form__model--wrapper">
-    <div class="form-model__title" v-if="title">
-      {{ title }}
-    </div>
-    <div class="form-model__content">
-      <ele-alert style="margin-bottom: 16px;" v-if="alertMeta" v-bind="alertMeta"></ele-alert>
-      <ele-form :ref="formRef" @change="onChangeFormStatus($event)" :elements="elements" :disabled="globalDisabled"></ele-form>
-    </div>
-    <div class="form-model__footer" v-if="footerMeta">
-      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import { BUILT_IN_EVENT_NAMES, parseFieldMap, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'
-import { v4 as uuidv4 } from 'uuid'
-import { net, type } from '@idooel/shared'
-import { parse } from '@idooel/expression'
-export default {
-  name: 'ele-form-model',
-  props: {
-    disabled: {
-      type: [Boolean, String],
-      default: '_routeMeta.disabled'
-    },
-    title: {
-      type: String
-    },
-    formMeta: {
-      type: Object
-    },
-    footerMeta: {
-      type: Object
-    }
-  },
-  data() {
-    return {}
-  },
-  provide () {
-    return {
-      [CONTEXT]: () => {
-        return {
-          exposed: this.exposed
-        }
-      }
-    }
-  },
-  computed: {
-    globalDisabled () {
-      return this.executeExpression(this.disabled)
-    },
-    formRef () {
-      return uuidv4()
-    },
-    exposed () {
-      return {
-        setFieldsValue: this.setFieldsValue,
-        validateFields: this.validateFields,
-        getFieldsValue: this.getFieldsValue,
-        route: this.$route,
-        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger
-      }
-    },
-    assignAttrForEvents () {
-      const events = this.footerElements.reduce((ret, ele) => {
-        ret[ele.eventName] = (e) => {
-          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })
-        }
-        return ret
-      }, {})
-      return {
-        ...this.$listeners,
-        ...events,
-        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],
-        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]
-      }
-    },
-    elements () {
-      const { elements } = this.formMeta
-      return elements
-    },
-    preRequest () {
-      const { preRequest = {} } = this.formMeta
-      return preRequest
-    },
-    infoRequest () {
-      const { infoRequest = {} } = this.formMeta
-      return infoRequest
-    },
-    alertMeta () {
-      const { alert = {} } = this.formMeta
-      return type.isEmpty(alert) ? null : alert
-    },
-    submitRequest () {
-      const { submitRequest = {} } = this.formMeta
-      return submitRequest
-    },
-    footerElements () {
-      const { elements } = this.footerMeta
-      return elements.call(this)
-    },
-    expressionData () {
-      return {
-        _route: this.$route.query,
-        _routeMeta: this.$route.meta
-      }
-    },
-    routeMetaMode () {
-      return this.$route.meta.mode
-    }
-  },
-  methods: {
-    collectDefaultValues () {
-      const ret = this.elements.reduce((ret, props) => {
-        const { name, defaultValue } = props
-        if (defaultValue) {
-          ret[name] = defaultValue
-        }
-        return ret
-      }, {})
-      return ret
-    },
-    onChangeFormStatus (props) {
-      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })
-    },
-    formModels (fieldNames) {
-      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}
-    },
-    executeExpression (expression, dataSource = {}) {
-      if (type.isBool(expression)) return expression
-      if (type.isEmpty(expression)) return false
-      return parse(expression, { ...this.expressionData, ...this.formModels(), ...dataSource })
-    },
-    execFieldMap (fieldMap = {}, dataSource = {}) {
-      const ret = parseFieldMap(fieldMap, { ...this.expressionData, ...dataSource})
-      return ret
-    },
-    async submitRequestTrigger (props = {}) {
-      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest
-      const currentUrl = this.executeExpressionForUrl(url)
-      if (!currentUrl) return
-      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
-        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, formModel: { ...this.formModels(), ...resp.data || {} } })
-        return resp.data
-      })
-      return ret
-    },
-    async infoRequestTrigger () {
-      if (PAGE_STATUS.CREATE == this.routeMetaMode) return
-      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
-      const currentUrl = this.executeExpressionForUrl(url)
-      if (!currentUrl) return
-      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {
-        const { data = {} } = resp
-        this.setFieldsValue(data)
-        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
-      })
-    },
-    async preRequestTrigger () {
-      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
-      const currentUrl = this.executeExpressionForUrl(url)
-      if (!currentUrl) return
-      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
-      this.setFieldsValue(data)
-      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
-    },
-    executeExpressionForUrl (url) {
-      return type.isApi(url) ? url : this.executeExpression(url)
-    },
-    setFieldsValue (props) {
-      this.$refs[this.formRef].setFieldsValue(props)
-    },
-    getFieldsValue (fieldNames) {
-      return this.$refs[this.formRef].getFieldsValue(fieldNames)
-    },
-    validateFields () {
-      return this.$refs[this.formRef].validateFields()
-    },
-    [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
-      if (this.globalDisabled) return
-      const status = this.$refs[this.formRef].validateFields()
-      if (status) {
-        //TODO fieldMap
-        return this.submitRequestTrigger(props)
-      } else {
-        return false
-      }
-    },
-    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
-      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
-    }
-  },
-  async mounted() {
-    this.setFieldsValue(this.collectDefaultValues())
-    await this.preRequestTrigger()
-    await this.infoRequestTrigger()
-    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.form__model--wrapper {
-  width: 100%;
-  height: 100%;
-  overflow: auto;
-  background: #fff;
-  .form-model__title {
-    height: 56px;
-    padding: 0 16px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    border-bottom: 1px solid var(--idooel-form-title-border-color);
-  }
-  .form-model__content {
-    padding: 16px;
-  }
-  .form-model__footer {
-    /* width: 100%; */
-    height: 64px;
-    position: fixed;
-    bottom: 0;
-    display: flex;
-    float: right;
-    flex-direction: row;
-    align-items: center;
-    justify-content: end;
-  }
-}
+<template>
+  <div class="form__model--wrapper">
+    <div class="form-model__title" v-if="title">
+      {{ title }}
+    </div>
+    <div class="form-model__content">
+      <ele-alert style="margin-bottom: 16px;" v-if="alertMeta" v-bind="alertMeta"></ele-alert>
+      <ele-form :ref="formRef" @change="onChangeFormStatus($event)" :elements="elements" :disabled="globalDisabled"></ele-form>
+    </div>
+    <div class="form-model__footer" v-if="footerMeta">
+      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BUILT_IN_EVENT_NAMES, RESERVE_EVENT_NAMES, PAGE_STATUS, CONTEXT, BUILT_IN_METHODS_NAMES } from '../../../utils'
+import { v4 as uuidv4 } from 'uuid'
+import { net, type } from '@idooel/shared'
+import { parse } from '@idooel/expression'
+import { createFormModel } from '@idooel/runtime-context'
+export default {
+  name: 'ele-form-model',
+  props: {
+    disabled: {
+      type: [Boolean, String],
+      default: '_routeMeta.disabled'
+    },
+    title: {
+      type: String
+    },
+    formMeta: {
+      type: Object
+    },
+    footerMeta: {
+      type: Object
+    }
+  },
+  inject: {
+    parentScopeId: {
+      default: () => (() => null)
+    },
+    parentEvalExpression: {
+      from: 'evalExpression',
+      default: () => (() => undefined)
+    }
+  },
+  data() {
+    return {
+      model: null,
+      unsubscribeFormData: null,
+      isSyncingFromModel: false
+    }
+  },
+  provide () {
+    return {
+      evalExpression: this.parseExpression,
+      parentScopeId: () => this.model?.scopeId,
+      [CONTEXT]: () => {
+        return {
+          exposed: this.exposed
+        }
+      }
+    }
+  },
+  computed: {
+    globalDisabled () {
+      return this.parseExpression(this.disabled)
+    },
+    formRef () {
+      return uuidv4()
+    },
+    exposed () {
+      return {
+        setFieldsValue: this.setFieldsValue,
+        validateFields: this.validateFields,
+        getFieldsValue: this.getFieldsValue,
+        executeExpressions: this.executeExpressions,
+        route: this.$route,
+        [BUILT_IN_METHODS_NAMES.SUBMIT_FORM]: this.submitRequestTrigger
+      }
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.$emit(ele.eventName || 'click', { ...e, formModel: this.formModels(), exposed: this.exposed })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT],
+        [BUILT_IN_EVENT_NAMES.CANCEL]: this[BUILT_IN_EVENT_NAMES.CANCEL]
+      }
+    },
+    elements () {
+      const { elements } = this.formMeta
+      return elements
+    },
+    preRequest () {
+      const { preRequest = {} } = this.formMeta
+      return preRequest
+    },
+    infoRequest () {
+      const { infoRequest = {} } = this.formMeta
+      return infoRequest
+    },
+    alertMeta () {
+      const { alert = {} } = this.formMeta
+      return type.isEmpty(alert) ? null : alert
+    },
+    submitRequest () {
+      const { submitRequest = {} } = this.formMeta
+      return submitRequest
+    },
+    footerElements () {
+      const { elements } = this.footerMeta
+      return elements.call(this)
+    },
+    expressionData () {
+      return {
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta
+      }
+    },
+    routeMetaMode () {
+      return this.$route.meta.mode
+    }
+  },
+  created () {
+    try {
+      const debugName = `FormModel_${uuidv4().slice(0, 8)}`
+      this.model = createFormModel(Symbol(debugName))
+      if (!this.model) {
+        throw new Error('Failed to create form model')
+      }
+      this.setupModelSubscriptions()
+    } catch (error) {
+      console.error('Error creating form model:', error)
+      this.model = null
+    }
+  },
+  methods: {
+    collectDefaultValues () {
+      const ret = this.elements.reduce((ret, props) => {
+        const { name, defaultValue } = props
+        if (defaultValue) {
+          ret[name] = defaultValue
+        }
+        return ret
+      }, {})
+      return ret
+    },
+    onChangeFormStatus (props) {
+      this.$emit(RESERVE_EVENT_NAMES.WATCH_FORM_STATUS, { ...props })
+      if (!this.model || this.isSyncingFromModel) return
+      const { value, props: fieldProps } = props || {}
+      if (fieldProps && fieldProps.name !== undefined) {
+        this.model.setFieldValue(fieldProps.name, value)
+        return
+      }
+      this.model.setFormData(this.formModels())
+    },
+    formModels (fieldNames) {
+      return this.getFieldsValue(fieldNames)
+    },
+    buildExpressionContext (dataSource = {}) {
+      const formData = this.model ? this.model.getFormData() : {}
+      return {
+        ...this.expressionData,
+        ...formData,
+        formData,
+        exposed: this.exposed,
+        ...dataSource
+      }
+    },
+    parseExpression (expression, dataSource = {}) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return false
+      const context = this.buildExpressionContext(dataSource)
+      if (this.model) {
+        try {
+          const val = this.model.eval(expression, context)
+          if ((val === undefined || val === null) && this.parentEvalExpression) {
+            return this.parentEvalExpression(expression, dataSource)
+          }
+          return val
+        } catch (error) {
+          console.error(`[FormModel] Expression parsing failed: "${expression}"`, error)
+          return undefined
+        }
+      }
+      return parse(expression, context)
+    },
+    execFieldMap (fieldMap = {}, dataSource = {}) {
+      if (!fieldMap || Object.keys(fieldMap).length === 0) {
+        return {}
+      }
+      const ret = {}
+      Object.keys(fieldMap).forEach((expression) => {
+        const targetKey = fieldMap[expression]
+        ret[targetKey] = this.parseExpression(expression, dataSource)
+      })
+      return ret
+    },
+    async submitRequestTrigger (props = {}) {
+      const { url, requestType, headers = {}, params = {}, fieldMap = {} } = this.submitRequest
+      const currentUrl = this.executeExpressionForUrl(url)
+      if (!currentUrl) return
+      const ret = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap, { ...this.formModels() }), ...this.formModels() }, { headers }).then(resp => {
+        this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, response: resp, formModel: { ...this.formModels(), ...resp.data || {} } })
+        return resp.data
+      })
+      return ret
+    },
+    async infoRequestTrigger () {
+      if (PAGE_STATUS.CREATE == this.routeMetaMode) return
+      const { url, requestType, params = {}, fieldMap = {}, headers = {} } = this.infoRequest
+      const currentUrl = this.executeExpressionForUrl(url)
+      if (!currentUrl) return
+      net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers }).then(resp => {
+        const { data = {} } = resp
+        this.setFieldsValue(data)
+        this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+      })
+    },
+    async preRequestTrigger () {
+      const { url, requestType = 'GET', params = {}, fieldMap = {}, headers = {} } = this.preRequest
+      const currentUrl = this.executeExpressionForUrl(url)
+      if (!currentUrl) return
+      const { data } = await net[requestType.toLowerCase()](currentUrl, { ...params, ...this.execFieldMap(fieldMap) }, { ...headers })
+      this.setFieldsValue(data)
+      this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { ...data })
+    },
+    executeExpressionForUrl (url) {
+      return type.isApi(url) ? url : this.parseExpression(url)
+    },
+    applyFormFields (props = {}) {
+      if (!this.$refs[this.formRef]) return
+      this.isSyncingFromModel = true
+      this.$refs[this.formRef].setFieldsValue(props)
+      this.$nextTick(() => {
+        this.isSyncingFromModel = false
+      })
+    },
+    setFieldsValue (props = {}) {
+      if (this.model) {
+        const currentData = this.model.getFormData() || {}
+        this.model.setFormData({ ...currentData, ...props })
+      }
+      this.applyFormFields(props)
+    },
+    getFieldsValue (fieldNames) {
+      if (this.model) {
+        const data = this.model.getFormData() || {}
+        if (Array.isArray(fieldNames)) {
+          return fieldNames.reduce((ret, key) => {
+            if (Object.prototype.hasOwnProperty.call(data, key)) {
+              ret[key] = data[key]
+            }
+            return ret
+          }, {})
+        }
+        if (typeof fieldNames === 'string') {
+          return data[fieldNames]
+        }
+        return data
+      }
+      return this.$refs[this.formRef] ? this.$refs[this.formRef].getFieldsValue(fieldNames) : {}
+    },
+    setupModelSubscriptions () {
+      if (!this.model) {
+        console.warn('[FormModel] Model not initialized, cannot setup subscriptions')
+        return
+      }
+      this.unsubscribeFormData = this.model.subscribe('formData', (newValue) => {
+        this.applyFormFields(newValue || {})
+      })
+    },
+    cleanupModelSubscriptions () {
+      const subscriptions = ['unsubscribeFormData']
+      subscriptions.forEach((key) => {
+        if (this[key]) {
+          this[key]()
+          this[key] = null
+        }
+      })
+    },
+    executeExpressions () {
+      return this.$refs[this.formRef].evalShowExpression()
+    },
+    validateFields () {
+      return this.$refs[this.formRef].validateFields()
+    },
+    async [BUILT_IN_EVENT_NAMES.SUBMIT] (props = {}) {
+      if (this.globalDisabled) return
+      const status = await this.$refs[this.formRef].validateFields()
+      if (status) {
+        //TODO fieldMap
+        return this.submitRequestTrigger(props)
+      } else {
+        return false
+      }
+    },
+    [BUILT_IN_EVENT_NAMES.CANCEL] (props = {}) {
+      this.$emit(BUILT_IN_EVENT_NAMES.CANCEL, { ...props })
+    }
+  },
+  async mounted() {
+    this.setFieldsValue(this.collectDefaultValues())
+    await this.preRequestTrigger()
+    await this.infoRequestTrigger()
+    this.$emit(RESERVE_EVENT_NAMES.INIT_FORM, { exposed: this.exposed })
+  },
+  destroyed () {
+    if (this.model) {
+      this.cleanupModelSubscriptions()
+      this.model.cleanup()
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.form__model--wrapper {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  background: #fff;
+  .form-model__title {
+    height: 56px;
+    padding: 0 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    border-bottom: 1px solid var(--idooel-form-title-border-color);
+  }
+  .form-model__content {
+    padding: 16px;
+  }
+  .form-model__footer {
+    /* width: 100%; */
+    height: 64px;
+    position: fixed;
+    bottom: 0;
+    display: flex;
+    float: right;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+  }
+}
 </style>

package/packages/models/step-model/index.js

@@ -1,5 +1,5 @@
-import EleStepModel from './src/index.vue'
-
-EleStepModel.install = Vue => Vue.component(EleStepModel.name, EleStepModel)
-
+import EleStepModel from './src/index.vue'
+
+EleStepModel.install = Vue => Vue.component(EleStepModel.name, EleStepModel)
+
 export default EleStepModel