@tagplus/components 1.1.0 → 1.2.2

package/package.json

@@ -8,7 +8,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "1.1.0",
+  "version": "1.2.2",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"
@@ -45,7 +45,7 @@
     "axios": "^0.27.0",
     "core-js": "^3.21.1",
     "element-theme-chalk": "^2.13",
-    "element-ui": "^2.15.9",
+    "element-ui": "2.15.8",
     "js-cookie": "^3.0.1",
     "vue": "^2.6.14",
     "vue-axios": "^2.1.5",

package/src/components/Dialog/Dialog.vue

@@ -0,0 +1,235 @@
+<template>
+  <transition
+    name="dialog-fade"
+    @after-enter="afterEnter"
+    @after-leave="afterLeave"
+  >
+    <div
+      v-show="visible"
+      class="el-dialog__wrapper"
+      @click.self="handleWrapperClick"
+    >
+      <div
+        :key="key"
+        ref="dialog"
+        role="dialog"
+        aria-modal="true"
+        :aria-label="title || 'dialog'"
+        :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
+        :style="style"
+      >
+        <div class="el-dialog__header">
+          <slot name="title">
+            <span class="el-dialog__title">{{ title }}</span>
+          </slot>
+          <button
+            v-if="showClose"
+            type="button"
+            class="el-dialog__headerbtn"
+            aria-label="Close"
+            @click="handleClose"
+          >
+            <i class="el-dialog__close el-icon el-icon-close" />
+          </button>
+        </div>
+        <div
+          v-if="rendered"
+          class="el-dialog__body"
+        >
+          <slot />
+        </div>
+        <div
+          v-if="$slots.footer"
+          class="el-dialog__footer"
+        >
+          <slot name="footer" />
+        </div>
+      </div>
+    </div>
+  </transition>
+</template>
+
+<script>
+import Popup from 'element-ui/src/utils/popup'
+import Migrating from 'element-ui/src/mixins/migrating'
+import emitter from 'element-ui/src/mixins/emitter'
+
+/**
+ * Sobrescreve o Dialog original sem usar o extends porque trocou um watch e watch não sobrescreve
+ * <BR /> A nossa versão chama o $emit open quando tem v-if
+ */
+export default {
+  name: 'TpDialog',
+
+  mixins: [Popup, emitter, Migrating],
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+
+    modal: {
+      type: Boolean,
+      default: true
+    },
+
+    modalAppendToBody: {
+      type: Boolean,
+      default: true
+    },
+
+    appendToBody: {
+      type: Boolean,
+      default: false
+    },
+
+    lockScroll: {
+      type: Boolean,
+      default: true
+    },
+
+    closeOnClickModal: {
+      type: Boolean,
+      default: true
+    },
+
+    closeOnPressEscape: {
+      type: Boolean,
+      default: true
+    },
+
+    showClose: {
+      type: Boolean,
+      default: true
+    },
+
+    width: String,
+
+    fullscreen: Boolean,
+
+    customClass: {
+      type: String,
+      default: ''
+    },
+
+    top: {
+      type: String,
+      default: '15vh'
+    },
+    beforeClose: Function,
+    center: {
+      type: Boolean,
+      default: false
+    },
+
+    destroyOnClose: Boolean
+  },
+
+  data () {
+    return {
+      closed: false,
+      key: 0
+    }
+  },
+
+  computed: {
+    style () {
+      const style = {}
+      if (!this.fullscreen) {
+        style.marginTop = this.top
+        if (this.width) {
+          style.width = this.width
+        }
+      }
+      return style
+    }
+  },
+
+  watch: {
+    // CORREÇÂO Sobrescreve o watch visible do dialog original para rodar o open quando tem v-if
+    visible: {
+      immediate: true,
+      handler (val, oldValue) {
+        // Fixing undefined reference of $el with next tick.
+        this.$nextTick(() => {
+          if (val) {
+            this.closed = false
+            this.$emit('open')
+            this.$el.addEventListener('scroll', this.updatePopper)
+            this.$nextTick(() => {
+              this.$refs.dialog.scrollTop = 0
+            })
+            if (this.appendToBody) {
+              document.body.appendChild(this.$el)
+            }
+          } else {
+            this.$el.removeEventListener('scroll', this.updatePopper)
+            if (!this.closed) this.$emit('close')
+            if (this.destroyOnClose) {
+              this.$nextTick(() => {
+                this.key++
+              })
+            }
+          }
+        })
+      }
+    }
+  },
+
+  mounted () {
+    if (this.visible) {
+      this.rendered = true
+      this.open()
+      if (this.appendToBody) {
+        document.body.appendChild(this.$el)
+      }
+    }
+  },
+
+  destroyed () {
+    // if appendToBody is true, remove DOM node after destroy
+    if (this.appendToBody && this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el)
+    }
+  },
+
+  methods: {
+    getMigratingConfig () {
+      return {
+        props: {
+          size: 'size is removed.'
+        }
+      }
+    },
+    handleWrapperClick () {
+      if (!this.closeOnClickModal) return
+      this.handleClose()
+    },
+    handleClose () {
+      if (typeof this.beforeClose === 'function') {
+        this.beforeClose(this.hide)
+      } else {
+        this.hide()
+      }
+    },
+    hide (cancel) {
+      if (cancel !== false) {
+        this.$emit('update:visible', false)
+        this.$emit('close')
+        this.closed = true
+      }
+    },
+    updatePopper () {
+      this.broadcast('ElSelectDropdown', 'updatePopper')
+      this.broadcast('ElDropdownMenu', 'updatePopper')
+    },
+    afterEnter () {
+      this.$emit('opened')
+    },
+    afterLeave () {
+      this.$emit('closed')
+    }
+  }
+}
+</script>

package/src/components/Dialog/index.js

@@ -0,0 +1,3 @@
+import Dialog from './Dialog'
+
+export default Dialog

package/src/components/index.js

@@ -11,6 +11,7 @@ import Multisuggest from './Multisuggest'
 import Step from './Step'
 import Steps from './Steps'
 import InputNumber from './InputNumber'
+import Dialog from './Dialog'
 
 export {
   Autosuggest,
@@ -25,5 +26,6 @@ export {
   Multisuggest,
   Step,
   Steps,
-  InputNumber
+  InputNumber,
+  Dialog
 }