simple-frame-unit 1.0.2

package/src/components/ed-base-vue/package/EdDialog/index.js

@@ -0,0 +1,8 @@
+import EdDialog from "./src/EdDialog.vue";
+
+/* istanbul ignore next */
+EdDialog.install = function (Vue) {
+  Vue.component(EdDialog.name, EdDialog)
+}
+
+export default EdDialog

package/src/components/ed-base-vue/package/EdDialog/src/EdDialog.vue

@@ -0,0 +1,138 @@
+<template>
+  <el-dialog v-bind="getBindValue()" @close="handleClose" @closed="handleClosed" @open="handlerOpen"
+             @opened="handlerOpened">
+
+    <template #title>
+      <slot name="title"></slot>
+    </template>
+
+    <!-- 内容层: 关闭时销毁 -->
+    <template v-if="destroyOnClose">
+      <DialogWrapper v-if="visible" :footerHeight="footerHeight" :fullscreen="fullscreen" :height="height"
+                     :showFooter="showFooter">
+        <slot></slot>
+      </DialogWrapper>
+    </template>
+
+    <!-- 内容层 -->
+    <template v-else>
+      <DialogWrapper :footerHeight="footerHeight" :fullscreen="fullscreen" :height="height" :showFooter="showFooter">
+        <slot></slot>
+      </DialogWrapper>
+    </template>
+
+    <!-- 底部按钮区与 -->
+    <template v-if="showFooter" #footer>
+      <DialogFooter ref="element" v-bind="getFooterProps()" @close="handleClose" @ok="handleOk">
+        <template v-for="item in Object.keys($slots)" #[item]="data">
+          <slot :name="item" v-bind="data || {}"></slot>
+        </template>
+      </DialogFooter>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import props, {FooterProps} from './Props'
+import DialogFooter         from "./components/DialogFooter.vue";
+import DialogWrapper        from "./components/DialogWrapper.vue";
+
+export default {
+  name: "EdDialog",
+  props: props,
+  components: {DialogFooter, DialogWrapper},
+  // 双向绑定
+  model: {
+    prop: 'visible',
+    event: 'change'
+  },
+  data() {
+    return {
+      defHeight: ""
+    }
+  },
+  methods: {
+    /**
+     * @name getBindValue
+     * @return {Object}
+     * @private
+     */
+    getBindValue() {
+      let props = Object.assign({}, this.$attrs, this.$props)
+      for (const key in FooterProps) {
+        if (props[key]) delete props[key]
+      }
+      return props
+    },
+
+    /**
+     * @name getFooterProps
+     * @returns {Object}
+     * @private
+     */
+    getFooterProps() {
+      let props = Object.assign({}, this.$props)
+      for (const key in props) {
+        if (!FooterProps[key]) delete props[key]
+      }
+      return props
+    },
+
+    /**
+     * Dialog 关闭按钮的回调
+     * @name handleClose
+     */
+    handleClose() {
+      /**
+       * 关闭弹窗的回调 change 函数
+       */
+      this.$emit('change', false)
+      /**
+       * 关闭弹窗的回调 update 函数
+       * @deprecated update
+       * @private
+       */
+      this.$emit('update:visible', false)
+      /**
+       * 关闭弹窗的回调 close 函数
+       */
+      this.$emit('close')
+    },
+
+    /**
+     * Dialog 关闭动画结束时的回调
+     * @name handleClose
+     */
+    handleClosed() {
+      this.$emit('closed')
+    },
+
+    /**
+     * Dialog 确定按钮的回调
+     * @name handleClose
+     */
+    handleOk() {
+      this.$emit('ok')
+    },
+
+    /**
+     * @name handlerOpen
+     * @description Dialog 打开的回调
+     */
+    handlerOpen() {
+      this.$emit('open')
+    },
+
+    /**
+     * @name handlerOpened
+     * @description Dialog 打开动画结束时的回调
+     */
+    handlerOpened() {
+      this.$emit('opened')
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "../../../style/index";
+</style>

package/src/components/ed-base-vue/package/EdDialog/src/Props.js

@@ -0,0 +1,91 @@
+/**
+ * EdDialog组件底部按钮属性
+ */
+export const FooterProps = {
+    loading: {type: Boolean},
+    /**
+     * @description: Show close button
+     */
+    showCancelBtn: {type: Boolean, default: true},
+    cancelButtonProps: {
+        type: Object, default: () => {
+            return {size: 'small'}
+        }
+    },
+    cancelText: {type: String, default: '关 闭'},
+    /**
+     * @description: Show confirmation button
+     */
+    showOkBtn: {type: Boolean, default: true},
+    okButtonProps: {
+        type: Object,
+        default: () => {
+            return {
+                size: 'small',
+                type: "primary"
+            }
+        }
+    },
+    okText: {type: String, default: '确 定'},
+    showFooter: {type: Boolean, default: true},
+    footerHeight: {type: [String, Number], default: 60,},
+}
+
+/**
+ * EdDialog组件属性
+ */
+export default {
+    // 是否显示 Dialog，支持 .sync 修饰符
+    visible: {type: Boolean, default: false},
+
+    // Dialog 的标题，也可通过具名 slot （见下表）传入
+    title: {type: String, default: ""},
+
+    // Dialog 的宽度 Number类型为px单位
+    width: {type: [String, Number], default: '50%'},
+
+    // Dialog 的高度 Number类型为px单位，请勿用百分比高度（如50%），因为父元素没有初始高度
+    height: {type: [String, Number]},
+
+    // 是否为全屏 Dialog
+    fullscreen: {type: Boolean, default: false},
+
+    // Dialog CSS 中的 margin-top 值
+    top: {type: String, default: "12vh"},
+
+    // 是否需要遮罩层
+    modal: {type: Boolean, default: true},
+
+    // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Dialog 的父元素上
+    modalAppendToBody: {type: Boolean, default: true},
+
+    // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
+    appendToBody: {type: Boolean, default: true},
+
+    // 是否在 Dialog 出现时将 body 滚动锁定
+    lockScroll: {type: Boolean, default: true},
+
+    // Dialog 的自定义类名
+    customClass: {type: String, default: "ed-dialog"},
+
+    // 是否可以通过点击 modal 关闭 Dialog
+    closeOnClickModal: {type: Boolean, default: true},
+
+    // 是否可以通过按下 ESC 关闭 Dialog
+    closeOnPressEscape: {type: Boolean, default: true},
+
+    // 是否显示关闭按钮
+    showClose: {type: Boolean, default: true},
+
+    // 关闭前的回调，会暂停 Dialog 的关闭
+    beforeClose: {type: Function},
+
+    // 是否对头部和底部采用居中布局
+    center: {type: Boolean, default: false},
+
+    // 关闭时销毁 Dialog 中的元素
+    destroyOnClose: {type: Boolean, default: true},
+
+
+    ...FooterProps
+}

package/src/components/ed-base-vue/package/EdDialog/src/components/DialogFooter.vue

@@ -0,0 +1,42 @@
+<template>
+  <div :style="{height: height}" class="ed-dialog-footer--warp">
+    <slot name="footer">
+      <slot name="insertFooter"></slot>
+      <el-button v-if="showCancelBtn" v-bind="cancelButtonProps" @click="handleClose"> {{ cancelText }}</el-button>
+      <slot name="centerFooter"></slot>
+      <el-button v-if="showOkBtn" :loading="loading" v-bind="okButtonProps" @click="handleOk"> {{ okText }}</el-button>
+      <slot name="appendFooter"></slot>
+    </slot>
+  </div>
+</template>
+
+<script>
+import {FooterProps} from '../Props'
+import {getVarType}  from "../../../../tools/utils";
+
+export default {
+  name: "DialogFooter",
+  props: FooterProps,
+  computed: {
+    height() {
+      return getVarType(this.footerHeight) === "string" ? this.footerHeight : `${this.footerHeight}px`;
+    }
+  },
+  methods: {
+    handleClose(e) {
+      this.$emit('close', e)
+    },
+    handleOk(e) {
+      this.$emit('ok', e)
+    },
+  }
+}
+</script>
+
+<style scoped>
+.ed-dialog-footer--warp {
+  display: flex;
+  align-items: center;
+  padding: 0 16px;
+}
+</style>

package/src/components/ed-base-vue/package/EdDialog/src/components/DialogWrapper.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :style="{height: fullscreen ? fullHeight : warpHeight }" class="ed-dialog--wrapper">
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import {getVarType} from "../../../../tools/utils";
+
+export default {
+  name: "DialogWrapper",
+  props: {
+    //
+    height: {
+      type: [String, Number]
+    },
+
+    // 是否为全屏 Dialog
+    fullscreen: {
+      type: Boolean,
+      default: false
+    },
+    showFooter: {type: Boolean, default: true},
+    footerHeight: {type: [String, Number], default: 60,},
+  },
+  computed: {
+    warpHeight() {
+      if (!this.height) {
+        return this.showFooter ? '55vh' : '65vh'
+      }
+      return getVarType(this.height) === 'number' ? this.height + 'px' : this.height
+    },
+    fullHeight() {
+      let innerHeight = window.innerHeight;
+
+      if (this.showFooter) {
+        let height = getVarType(this.footerHeight) === 'number' ? this.footerHeight : this.footerHeight.slice(0, -2)
+        return `${innerHeight - 57 - height - 30}px`
+      }
+
+      return `${innerHeight - 57 - 30}px`
+    },
+  },
+
+}
+</script>
+<style lang="scss" scoped>
+.ed-dialog--wrapper {
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 15px;
+}
+</style>

package/src/components/ed-base-vue/package/EdDrawer/index.js

@@ -0,0 +1,8 @@
+import EdDrawer from './src/EdDrawer.vue'
+
+/* istanbul ignore next */
+EdDrawer.install = function (Vue) {
+  Vue.component(EdDrawer.name, EdDrawer)
+}
+
+export default EdDrawer

package/src/components/ed-base-vue/package/EdDrawer/src/DrawerFooter.vue

@@ -0,0 +1,41 @@
+<template>
+  <div class="ed-drawer__footer" :style="{height: height}">
+    <slot name="footer">
+      <slot name="insertFooter"></slot>
+      <el-button v-if="showCancelBtn" v-bind="cancelButtonProps" @click="handleClose">
+        {{ cancelText }}
+      </el-button>
+      <slot name="centerFooter"></slot>
+      <el-button v-if="showOkBtn" :loading="loading" v-bind="okButtonProps" @click="handleOk">
+        {{ loading ? '提交中 ...' : okText }}
+      </el-button>
+      <slot name="appendFooter"></slot>
+    </slot>
+  </div>
+</template>
+
+<script>
+import { FooterProps } from './props'
+import {getVarType}    from "../../../tools/utils";
+export default {
+  name: "DrawerFooter",
+  props: FooterProps,
+  computed:{
+    height(){
+      return getVarType(this.footerHeight) === "string" ? this.footerHeight : `${this.footerHeight}px`;
+    }
+  },
+  methods: {
+    handleClose() {
+      this.$emit('close')
+    },
+    handleOk() {
+      this.$emit('ok')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/ed-base-vue/package/EdDrawer/src/EdDrawer.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-drawer ref="ElDrawer" v-bind="getBindValues()" @close="handleClose" @closed="handleClosed" @open="handlerOpen"
+             @opened="handlerOpened">
+    <!-- 标题区 -->
+    <template #title>
+      <slot name="header"></slot>
+    </template>
+
+
+    <!-- 内容层 -->
+    <div :style="{height: contentHeight}" class="ed-drawer__content">
+      <slot></slot>
+    </div>
+
+    <!-- 操作区域 -->
+    <DrawerFooter v-bind="getFooterProps()" @close="handleClose" @ok="handleOk">
+      <template v-for="item in Object.keys($slots)" #[item]="data">
+        <slot :name="item" v-bind="data || {}"></slot>
+      </template>
+    </DrawerFooter>
+  </el-drawer>
+</template>
+
+<script>
+import props, {FooterProps} from './props'
+import DrawerFooter         from './DrawerFooter'
+import {getVarType}         from "../../../tools/utils";
+
+/**
+ * 统一的抽屉式弹出组件
+ *
+ * - 示例
+ *
+ * ```vue
+ * <ed-drawer ref="elsDrawer" :title="title" :visible="visible" @close="handlerClose" @ok="handlerOk">
+ * </ed-drawer>
+ * ```
+ *
+ * [](./EdDrawerProps.md ':include')
+ *
+ * [](./EdDrawerFooterProps.md ':include')
+ *
+ */
+export default {
+  name: "EdDrawer",
+  components: {DrawerFooter},
+  props: props,
+  // 双向绑定
+  model: {
+    prop: 'visible',
+    event: 'change'
+  },
+  computed: {
+    contentHeight() {
+      let innerHeight = window.innerHeight;
+      let height = getVarType(this.footerHeight) === 'number' ? this.footerHeight : this.footerHeight.slice(0, -2)
+      return `${innerHeight - 58 - height}px`
+    },
+  },
+  methods: {
+    /**
+     * @name getBindValues
+     * @returns {Object}
+     * @private
+     */
+    getBindValues() {
+      let props = Object.assign({}, this.$attrs, this.$props)
+      for (const key in FooterProps) {
+        if (props[key]) delete props[key]
+      }
+      return props
+    },
+
+    /**
+     * @name getFooterProps
+     * @returns {Object}
+     * @private
+     */
+    getFooterProps() {
+      let props = Object.assign({}, this.$props)
+      for (const key in props) {
+        if (!FooterProps[key]) delete props[key]
+      }
+      return props
+    },
+    /**
+     * Drawer 点击关闭按钮时触发
+     */
+    handleClose() {
+      /**
+       * 关闭弹窗的回调 change 函数
+       */
+      this.$emit('change', false)
+      /**
+       * 关闭弹窗的回调 update 函数
+       * @deprecated update
+       * @private
+       */
+      this.$emit('update:visible', false)
+      /**
+       * 关闭弹窗的回调 close 函数
+       */
+      this.$emit('close')
+    },
+
+    /**
+     * Drawer 关闭动画结束时的回调
+     * @name handleClose
+     */
+    handleClosed() {
+      this.$emit('closed')
+    },
+
+    /**
+     * Drawer 点击确定按钮时触发
+     */
+    handleOk() {
+      this.$emit('ok')
+    },
+
+    /**
+     * @name handlerOpen
+     * @description Drawer 打开的回调
+     */
+    handlerOpen() {
+      this.$emit('open')
+    },
+
+    /**
+     * @name handlerOpened
+     * @description Drawer 打开动画结束时的回调
+     */
+    handlerOpened() {
+      this.$emit('opened')
+    },
+
+    /**
+     * @name closeDrawer
+     * @description 用于关闭 Drawer, 该方法会调用传入的 before-close 方法
+     */
+    closeDrawer() {
+      this.$refs.ElDrawer.closeDrawer()
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../style/index";
+</style>

package/src/components/ed-base-vue/package/EdDrawer/src/props.js

@@ -0,0 +1,71 @@
+/**
+ * EdDrawer组件底部按钮属性
+ */
+export const FooterProps = {
+    loading: {type: Boolean},
+    /**
+     * @description: Show close button
+     */
+    showCancelBtn: {type: Boolean, default: true},
+    cancelButtonProps: {
+        type: Object,
+        default: () => {
+            return {
+                size: 'small',
+            }
+        }
+    },
+    cancelText: {type: String, default: '关 闭'},
+    /**
+     * @description: Show confirmation button
+     */
+    showOkBtn: {type: Boolean, default: true},
+    okButtonProps: {
+        type: Object,
+        default: () => {
+            return {
+                size: 'small',
+                type: "primary"
+            }
+        }
+    },
+    okText: {type: String, default: '确 定'},
+    showFooter: {type: Boolean, },
+    footerHeight: {type: [String, Number], default: 60,},
+}
+
+/**
+ * EdDrawer组件属性
+ */
+export default {
+    // Drawer 自身是否插入至 body 元素上。嵌套的 Drawer 必须指定该属性并赋值为 true
+    appendToBody: {type: Boolean, default: true},
+    // 关闭前的回调，会暂停 Drawer 的关闭
+    beforeClose: {type: Function},
+    // 是否可以通过按下 ESC 关闭 Drawer
+    closeOnPressEscape: {type: Boolean, default: true},
+    // Drawer 的自定义类名
+    customClass: {type: String, default: "ed-drawer"},
+    // 控制是否在关闭 Drawer 之后将子元素全部销毁
+    destroyOnClose: {type: Boolean, default: true},
+    // 是否需要遮罩层
+    modal: {type: Boolean, default: true},
+    // 遮罩层是否插入至 body 元素上，若为 false，则遮罩层会插入至 Drawer 的父元素上
+    modalAppendToBody: {type: Boolean, default: true},
+    // Drawer 打开的方向  rtl / ltr / ttb / btt
+    direction: {type: String, default: 'rtl'},
+    // 是否显示关闭按钮
+    showClose: {type: Boolean, default: true},
+    // Drawer 窗体的大小, 当使用 number 类型时, 以像素为单位, 当使用 string 类型时, 请传入 'x%', 否则便会以 number 类型解释
+    size: {type: [Number, String], default: '40%'},
+    // Drawer 的标题，也可通过具名 slot （见下表）传入
+    title: {type: String},
+    // 是否显示 Drawer，支持 .sync 修饰符
+    visible: {type: Boolean, default: false},
+    // 点击遮罩层是否可以关闭 Drawer
+    wrapperClosable: {type: Boolean, default: true},
+    // 控制是否显示 header 栏, 默认为 true, 当此项为 false 时, title attribute 和 title slot 均不生效
+    withHeader: {type: Boolean, default: true},
+
+    ...FooterProps
+}

package/src/components/ed-base-vue/package/EdFlow/index.js

@@ -0,0 +1,8 @@
+import EdFlow from './src/index.vue'
+
+/* istanbul ignore next */
+EdFlow.install = function (Vue) {
+    Vue.component(EdFlow.name, EdFlow)
+}
+
+export default EdFlow