@idooel/components 0.0.1 → 0.0.2-beta.10

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

@@ -0,0 +1,224 @@
+<template>
+  <div class="ele-step-model__wrapper">
+    <div class="ele-step-model__step--wrapper">
+      <a-steps class="ele-steps" :current="current" size="small">
+        <a-step v-for="step in elements" :title="step.title" :key="step.key" />
+      </a-steps>
+    </div>
+    <div class="ele-step-model__content--wrapper">
+      <template v-for="name in scopedSlotsNames">
+        <div :key="name" v-if="currentSlotName == name" :class="['ele-step-model__slot', `ele-step-model__slot--${name}`]">
+          <slot :name="name"></slot>
+        </div>
+      </template>
+    </div>
+    <div class="ele-step-model__footer--wrapper">
+      <ele-button-group v-on="assignAttrForEvents" :data-source="footerElements"></ele-button-group>
+    </div>
+  </div>
+</template>
+
+<script>
+import { BUILT_IN_EVENT_NAMES, CONTEXT } from '../../../utils'
+import { parse } from '@idooel/expression'
+import { type } from '@idooel/shared'
+export default {
+  name: 'ele-step-model',
+  props: {
+    stepMeta: {
+      type: Object,
+      default: () => ({})
+    },
+    footerMeta: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      current: 0,
+      currentSlotComponentRef: null,
+      innerFooterElements: []
+    }
+  },
+  provide() {
+    return {
+      [CONTEXT]: () => {
+        return {
+          ...this.expressionData
+        }
+      }
+    }
+  },
+  computed: {
+    routeMetaDisabled () {
+      return this.executeExpression(this.$route.meta.disabled)
+    },
+    expressionData () {
+      return {
+        current: this.current,
+        _route: this.$route.query,
+        _routeMeta: this.$route.meta
+      }
+    },
+    currentSlotName () {
+      return this.scopedSlotsNames[this.current]
+    },
+    footerElements () {
+      return this.innerFooterElements
+    },
+    assignAttrForEvents () {
+      const events = this.footerElements.reduce((ret, ele) => {
+        ret[ele.eventName] = (e) => {
+          this.evalShowExpressionForFooterElements()
+          this.$emit(ele.eventName || 'click', { ...e, exposed: this.exposedMethods })
+        }
+        return ret
+      }, {})
+      return {
+        ...this.$listeners,
+        ...events,
+        [BUILT_IN_EVENT_NAMES.NEXT]: this[BUILT_IN_EVENT_NAMES.NEXT],
+        [BUILT_IN_EVENT_NAMES.PREVIOUS]: this[BUILT_IN_EVENT_NAMES.PREVIOUS],
+        [BUILT_IN_EVENT_NAMES.SUBMIT]: this[BUILT_IN_EVENT_NAMES.SUBMIT]
+      }
+    },
+    activeIndex () {
+      const { activeIndex } = this.stepMeta
+      return activeIndex
+    },
+    elements () {
+      const { elements } = this.stepMeta
+      return elements
+    },
+    scopedSlotsNames () {
+      const slotNames = this.elements.map(item => item.key)
+      return slotNames
+    },
+    exposedMethods () {
+      return {
+        slotRef: this.currentSlotComponentRef,
+        setCurrentStep: this.setCurrentStep,
+        next: this.nextStep,
+        prev: this.prevStep,
+        current: this.current
+      }
+    }
+  },
+  watch: {
+    activeIndex: {
+      handler (idx) {
+        this.current = idx
+      },
+      immediate: true
+    },
+    current: {
+      handler () {
+        this.$nextTick(() => {
+          this.currentSlotComponentRef = this.getCurrentSlotComponentRef()
+        })
+      },
+      immediate: true
+    }
+  },
+  created () {
+    const { elements } = this.footerMeta
+    this.innerFooterElements = elements.call(this)
+    this.evalShowExpressionForFooterElements()
+  },
+  methods: {
+    executeExpression (expression) {
+      if (type.isBool(expression)) return expression
+      if (type.isEmpty(expression)) return false
+      return parse(expression, { ...this.expressionData })
+    },
+    evalShowExpressionForFooterElements () {
+      this.innerFooterElements = this.innerFooterElements.map(element => {
+        const { show = true, key, eventName } = element
+        if(key == BUILT_IN_EVENT_NAMES.SUBMIT || eventName == BUILT_IN_EVENT_NAMES.SUBMIT) {
+          // built in submit button should according to the route meta disabled
+          this.$set(element, '_show', this.executeExpression(show, this.expressionData) && !this.routeMetaDisabled)
+          return element
+        }
+        show && this.$set(element, '_show', this.executeExpression(show, this.expressionData))
+        return element
+      })
+    },
+    getCurrentSlotComponentRef () {
+      const includeMetaCmp = this.$children.find(child => child.meta)
+      if (!includeMetaCmp) return null
+      const { $children: components } = includeMetaCmp
+      const target = components.find(cmp => cmp.$options._componentTag === 'ele-tpl')
+      return target.getModel ? target.getModel() : null
+    },
+    setCurrentStep (index) {
+      this.current = index
+      this.evalShowExpressionForFooterElements()
+    },
+    nextStep () {
+      if (this.current >= this.elements.length - 1) return
+      this.current ++
+      this.evalShowExpressionForFooterElements()
+    },
+    prevStep () {
+      if (this.current <= 0) return
+      this.current --
+      this.evalShowExpressionForFooterElements()
+    },
+    [BUILT_IN_EVENT_NAMES.NEXT] (props) {
+      this.$emit(BUILT_IN_EVENT_NAMES.NEXT, { ...props, exposed: { ...this.exposedMethods } })
+    },
+    [BUILT_IN_EVENT_NAMES.PREVIOUS] (props) {
+      this.$emit(BUILT_IN_EVENT_NAMES.PREVIOUS, { ...props, exposed: { ...this.exposedMethods } })
+    },
+    [BUILT_IN_EVENT_NAMES.SUBMIT] (props) {
+      const currentComponent = this.getCurrentSlotComponentRef() || {}
+      const hasSubmitMethod = currentComponent.hasOwnProperty(BUILT_IN_EVENT_NAMES.SUBMIT)
+      hasSubmitMethod && currentComponent[BUILT_IN_EVENT_NAMES.SUBMIT]()
+      this.$emit(BUILT_IN_EVENT_NAMES.SUBMIT, { ...props, exposed: { ...this.exposedMethods } })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.ele-step-model__wrapper {
+  width: 100%;
+  height: 100vh;
+  position: relative;
+  .ele-step-model__step--wrapper {
+    width: 100%;
+    height: 64px;
+    padding: 16px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    background: #fff;
+    .ele-steps {
+      .ant-steps-item {
+        text-align: left;
+      }
+    }
+  }
+  .ele-step-model__content--wrapper {
+    width: 100%;
+    width: 100%;
+    margin-top: 16px;
+    margin-bottom: 16px;
+    height: calc(100vh - 64px - 64px - 16px - 16px);
+    overflow: auto;
+  }
+  .ele-step-model__footer--wrapper {
+    width: 100%;
+    height: 64px;
+    background: #fff;
+    position: absolute;
+    bottom: 0;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: end;
+  }
+}
+</style>import meta from '@/views/tree-table-page/meta'import meta from '@/views/tree-table-page/meta'
+