@tagplus/components 0.2.109 → 0.2.110

package/package.json

@@ -7,7 +7,7 @@
       "email": "bruno@tagplus.com.br"
     }
   ],
-  "version": "0.2.109",
+  "version": "0.2.110",
   "main": "./dist/tp.common.js",
   "directories": {
     "lib": "src/lib"
@@ -29,7 +29,7 @@
     "doc": "yarn docs",
     "docs": "nodemon --exec \"vuese gen && vuese serve\" --watch ./src -e js,vue,scss",
     "docs:gen": "vuese gen",
-    "lint": "vue-cli-service lint",
+    "lint": "eslint --cache --ext .js,.vue --ignore-path .gitignore .",
     "pub": "yarn build && yarn publish --access public",
     "pub:beta": "yarn build && yarn publish --tag beta",
     "serve": "vue-cli-service serve --open ./examples/main.js",
@@ -51,20 +51,22 @@
     "vue-i18n": "^8.14.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.17.0",
+    "@nuxtjs/eslint-config": "^8.0.0",
+    "@nuxtjs/eslint-module": "^3.0.2",
     "@vue/cli-plugin-babel": "^5.0.3",
-    "@vue/cli-plugin-eslint": "^5.0.3",
     "@vue/cli-plugin-unit-jest": "^5.0.3",
     "@vue/cli-service": "^5.0.3",
-    "@vue/eslint-config-prettier": "^6.0.0",
     "@vue/test-utils": "1.0.0-beta.30",
     "@vuese/cli": "^2.10.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "^10.0.1",
     "babel-jest": "^24.9.0",
     "babel-plugin-module-resolver": "^3.2.0",
-    "eslint": "^6.2.2",
-    "eslint-plugin-prettier": "^3.1.0",
-    "eslint-plugin-vue": "^6.0.1",
+    "eslint": "^8.9.0",
+    "eslint-config-prettier": "^8.4.0",
+    "eslint-config-standard": "^16.0.3",
+    "eslint-plugin-nuxt": ">=0.4.2",
+    "eslint-plugin-prettier": "^4.0.0",
     "node-sass": "^4.9.0",
     "nodemon": "^2.0.1",
     "prettier": "^1.18.2",

package/src/components/Money/Money.vue

@@ -18,7 +18,7 @@
 
     <template
       v-for="(_, slot) of $scopedSlots"
-      v-slot:[slot]="scope"
+      #[slot]="scope"
     >
       <slot
         :name="slot"

package/src/components/Step/Step.vue

@@ -0,0 +1,222 @@
+<template>
+  <div
+    class="el-step"
+    :style="style"
+    :class="[
+      !isSimple && `is-${$parent.direction}`,
+      isSimple && 'is-simple',
+      isLast && !space && !isCenter && 'is-flex',
+      isCenter && !isVertical && !isSimple && 'is-center']"
+  >
+    <!-- icon & line -->
+    <div
+      class="el-step__head"
+      :class="`is-${currentStatus === 'active' ? 'finish' : currentStatus}`"
+    >
+      <div
+        class="el-step__line"
+        :style="isLast ? '' : { marginRight: $parent.stepOffset + 'px' }"
+      >
+        <i class="el-step__line-inner" :style="lineStyle" />
+      </div>
+
+      <div class="el-step__icon" :class="`is-${icon ? 'icon' : 'text'}`">
+        <slot
+          v-if="currentStatus !== 'success' && currentStatus !== 'error'"
+          name="icon"
+        >
+          <i v-if="icon" class="el-step__icon-inner" :class="[icon]" />
+          <div v-if="!icon && !isSimple" class="el-step__icon-inner">
+            {{ index + 1 }}
+          </div>
+        </slot>
+        <i
+          v-else
+          :class="['el-icon-' + (currentStatus === 'success' ? 'check' : 'close')]"
+          class="el-step__icon-inner is-status"
+        />
+      </div>
+    </div>
+    <!-- title & description -->
+    <div class="el-step__main">
+      <div
+        ref="title"
+        class="el-step__title"
+        :class="['is-' + currentStatus]"
+      >
+        <slot name="title">
+          {{ title }}
+        </slot>
+      </div>
+      <div v-if="isSimple" class="el-step__arrow" />
+      <div
+        v-else
+        class="el-step__description"
+        :class="['is-' + currentStatus]"
+      >
+        <slot name="description">
+          {{ description }}
+        </slot>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TpStep',
+
+  props: {
+    title: {
+      type: String,
+      default: ''
+    },
+    icon: {
+      type: String,
+      default: ''
+    },
+    description: {
+      type: String,
+      default: ''
+    },
+    status: {
+      type: String,
+      default: ''
+    }
+  },
+
+  data() {
+    return {
+      index: -1,
+      lineStyle: {},
+      internalStatus: ''
+    }
+  },
+
+  computed: {
+    currentStatus() {
+      return this.internalStatus
+    },
+    prevStatus() {
+      const prevStep = this.$parent.steps[this.index - 1]
+      return prevStep ? prevStep.currentStatus : 'wait'
+    },
+    isCenter() {
+      return this.$parent.alignCenter
+    },
+    isVertical() {
+      return this.$parent.direction === 'vertical'
+    },
+    isSimple() {
+      return this.$parent.simple
+    },
+    isLast() {
+      const parent = this.$parent
+      return parent.steps[parent.steps.length - 1] === this
+    },
+    stepsCount() {
+      return this.$parent.steps.length
+    },
+    space() {
+      const { isSimple, $parent: { space } } = this
+      return isSimple ? '' : space 
+    },
+    style: function() {
+      const style = {}
+      const parent = this.$parent
+      const len = parent.steps.length
+
+      const space = (typeof this.space === 'number'
+        ? this.space + 'px'
+        : this.space
+          ? this.space
+          : 100 / (len - (this.isCenter ? 0 : 1)) + '%')
+      style.flexBasis = space
+      if (this.isVertical) return style
+      if (this.isLast) {
+        style.maxWidth = 100 / this.stepsCount + '%'
+      } else {
+        style.marginRight = -this.$parent.stepOffset + 'px'
+      }
+
+      return style
+    }
+  },
+
+  watch: {
+    status (newVal) {
+      if(newVal === 'process' || newVal === 'error'){
+        this.updateStatus(this.$parent.active)
+      }
+    },
+
+  },
+
+  beforeCreate() {
+    this.$parent.steps.push(this)
+  },
+
+  beforeDestroy() {
+    const steps = this.$parent.steps
+    const index = steps.indexOf(this)
+    if (index >= 0) {
+      steps.splice(index, 1)
+    }
+  },
+
+  mounted() {
+    const unwatch = this.$watch('index', () => {
+      this.$watch('$parent.active', this.updateStatus, { immediate: true })
+      this.$watch('$parent.processStatus', () => {
+        const activeIndex = this.$parent.active
+        this.updateStatus(activeIndex)
+      }, { immediate: true })
+      unwatch()
+    })
+  },
+
+  methods: {
+    updateStatus(val) {
+      const prevChild = this.$parent.$children[this.index - 1]
+
+      if (this.status === 'error'){
+        this.internalStatus = 'error'
+      } else if (val > this.index) {
+        this.internalStatus = this.$parent.finishStatus
+      } else if (val === this.index && this.prevStatus !== 'error') {
+        this.internalStatus = this.$parent.processStatus
+      } else if (this.$parent.newItem && this.prevStatus !== 'error') {
+        this.internalStatus = 'wait'
+      }
+
+      if (prevChild) prevChild.calcProgress(this.internalStatus)
+    },
+
+    calcProgress(status) {
+      let step = 100
+      const style = {}
+
+      style.transitionDelay = 150 * this.index + 'ms'
+      // if (status === this.$parent.processStatus) {
+      //   step = this.currentStatus !== 'error' ? 0 : 0
+      // } else 
+      if (status === 'wait') {
+        step = 0
+        style.transitionDelay = (-50 * this.index) + 'ms'
+      }
+
+      style.borderWidth = step && !this.isSimple ? '1px' : 0
+      this.$parent.direction === 'vertical'
+        ? style.height = step + '%'
+        : style.width = step + '%'
+
+      this.lineStyle = style
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.el-step__head.is-process {
+    color: #2d6eda;
+    border-color: #2d6eda;
+}
+</style>

package/src/components/Step/index.js

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

package/src/components/Steps/Steps.vue

@@ -0,0 +1,19 @@
+
+<script>
+import { Steps } from 'element-ui'
+
+export default {
+  name: 'TpSteps',
+  extends: Steps,
+  props: {
+    newItem: {
+      type: Boolean,
+      default: false
+    }
+  },
+}   
+
+</script>
+
+<style lang="scss" scoped>
+</style>

package/src/components/Steps/index.js

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

package/src/components/index.js

@@ -8,6 +8,8 @@ import Loader from './Loader'
 import Skeleton from './Skeleton'
 import Tip from './Tip'
 import Multisuggest from './Multisuggest'
+import Step from './Step'
+import Steps from './Steps'
 import InputNumber from './InputNumber'
 
 export {
@@ -21,5 +23,7 @@ export {
   Skeleton,
   Tip,
   Multisuggest,
+  Step,
+  Steps,
   InputNumber
 }