@tagplus/components 5.3.2 → 5.3.4

package/src/components/Autosuggest/index.js

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

package/src/components/Dialog/Dialog.vue

@@ -0,0 +1,253 @@
+<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"
+          >
+            <em 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: {
+      type: String,
+      default: 'auto'
+    },
+
+    fullscreen: Boolean,
+
+    customClass: {
+      type: String,
+      default: ''
+    },
+
+    top: {
+      type: String,
+      default: '15vh'
+    },
+
+    beforeClose: {
+      type: Function,
+      default: () => {}
+    },
+
+    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(() => {
+              if (this.$refs?.dialog) {
+                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/Inline/Inline.vue

@@ -0,0 +1,149 @@
+<template>
+  <div
+    :id="`${_id}-wrapper`"
+    class="tp-inline"
+  >
+    <span
+      v-if="hideInput || readonly"
+      data-tid="inline-span"
+    >
+      <a
+        :id="`${_id}-toggle`"
+        tabindex="0"
+        @click="toggleInput"
+        @keypress.enter="toggleInput"
+      >
+        <span data-tid="inline-value">{{ value }}</span>
+        <small
+          v-if="!readonly"
+          class="el-icon-edit"
+        />
+      </a>
+    </span>
+    <el-input
+      v-else
+      :id="`${_id}-input`"
+      ref="inlineInput"
+      :value="value"
+      data-tid="inline-input"
+      @input="input"
+      @blur="blur"
+      @keypress.enter.native="toggleInput"
+    >
+      <el-button
+        :id="`${_id}-btn`"
+        slot="append"
+        icon="el-icon-check"
+        data-tid="inline-button"
+        @click="toggleInput"
+      >
+        {{ buttonText }}
+      </el-button>
+    </el-input>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'TpInline',
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: null
+    },
+
+    value: {
+      type: [Number, String],
+      default: ''
+    },
+
+    readonly: {
+      type: Boolean,
+      default: false
+    },
+
+    inputHidden: {
+      type: Boolean,
+      default: true
+    },
+
+    buttonText: {
+      type: String,
+      default: 'Ok'
+    }
+  },
+
+  data () {
+    return {
+      hideInput: true
+    }
+  },
+
+  computed: {
+    _id () {
+      return this.id || this.$options.name
+    }
+  },
+
+  mounted () {
+    this.hideInput = this.inputHidden
+  },
+
+  methods: {
+    toggleInput () {
+      const status = !this.hideInput
+
+      if (this.readonly) {
+        this.hideInput = true
+      } else if (!this.readonly) {
+        this.hideInput = status
+
+        if (!this.hideInput) {
+          this.$nextTick(function () {
+            this.$refs.inlineInput.focus()
+          })
+        }
+      }
+    },
+
+    input (event) {
+      this.$emit('input', event)
+    },
+
+    blur (event) {
+      this.$emit('blur', event)
+    }
+
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tp-inline {
+  .el-input-group__append,
+  .el-input-group__append button.el-button {
+    background-color: $--color-primary;
+    border-color: $--color-primary;
+    color: $--color-white;
+    height: 100%;
+    border-radius: 0px
+  }
+
+  > span {
+    display: inline-block;
+    padding: 12px 0;
+  }
+  a {
+    cursor: pointer;
+    display: inline-block;
+    color: $--color-text-primary;
+    border-bottom: 1px dotted transparent;
+
+    &:focus,
+    &:hover {
+      border-bottom-color: $--color-text-primary;
+    }
+  }
+}
+</style>

package/src/components/Inline/index.js

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