fcad-core-dragon 2.1.1 → 2.1.2

package/src/components/AppCompButtonProgress.vue

@@ -1,132 +1,137 @@
-<template>
-  <div class="button-progress-wrapper">
-    <app-base-button
-      :id="`btn_branch_${branchData.id}`"
-      :target-ref="branchData.id"
-      aria-controls="right-sidebar"
-      :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
-      :aria-label="btnTitle || $t('text.place_holder.for_title_btn_progress')"
-      :aria-expanded="isActive"
-      :class="
-        branchData.state === status.COMPLETE
-          ? 'branch-btn-default branche-complete'
-          : 'branch-btn-default'
-      "
-      @click="openBranch(branchData.id)"
-    >
-      <svg
-        v-if="branchData.state === status.COMPLETE"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <use href="#check-icon"></use>
-      </svg>
-      <svg
-        v-if="branchData.state != status.COMPLETE"
-        aria-hidden="true"
-        focusable="false"
-      >
-        <use href="#navigate-next-icon"></use>
-      </svg>
-    </app-base-button>
-  </div>
-</template>
-<script>
-import AppBaseButton from './AppBaseButton.vue'
-export default {
-  components: { AppBaseButton },
-  props: {
-    mini: {
-      type: Boolean,
-      default: false
-    },
-    percent: {
-      type: [Number],
-      default: 0,
-      required: true
-    },
-    branchData: {
-      type: Object,
-      required: true
-    },
-    setTarget: {
-      type: [String],
-      default: ''
-    },
-
-    btnTitle: {
-      type: String,
-      default: null
-    }
-  },
-  data() {
-    const svgRadius = 23
-    return {
-      radius: svgRadius,
-      circumference: svgRadius * 2 * Math.PI,
-      status: {
-        NEW: 'new',
-        STARTED: 'started',
-        COMPLETE: 'complete'
-      },
-      withRouter: false, //Only for demo purpose. Remove after demo
-      isActive: false,
-      currentPercent: 0
-    }
-  },
-
-  created() {
-    this.$bus.$on('branching-hidden', this.resetIsActive)
-  },
-
-  beforeUnmount() {
-    this.$bus.$off('branching-hidden', this.resetIsActive)
-  },
-
-  methods: {
-    openBranch(e) {
-      this.isActive = true
-      this.$bus.$emit('open-sidebar', { ctx: 'ctxBranching', e })
-    },
-
-    resetIsActive() {
-      this.isActive = false
-    }
-  }
-}
-</script>
-<style lang="scss">
-.button-progress-wrapper {
-  &.card-btn {
-    .branch-btn-default {
-      left: 5.5px;
-      top: 5.5px;
-      min-width: 40px;
-      min-height: 40px;
-    }
-  }
-}
-
-.button-progress-wrapper {
-  &:not(.card-btn) {
-    .branch-btn-default {
-      min-width: 42px;
-      min-height: 42px;
-    }
-  }
-}
-
-.button-progress-wrapper {
-  position: relative;
-
-  .progress-ring {
-    position: absolute;
-    top: 0;
-    left: 0;
-  }
-
-  .branch-btn-default {
-    position: absolute;
-  }
-}
-</style>
+<template>
+  <div class="button-progress-wrapper">
+    <app-base-button
+      :id="`btn_branch_${branchData.id}`"
+      :target-ref="branchData.id"
+      aria-controls="right-sidebar"
+      :title="btnTitle || $t('text.place_holder.for_title_btn_progress')"
+      :aria-label="btnTitle || $t('text.place_holder.for_title_btn_progress')"
+      :aria-expanded="isActive"
+      :class="
+        branchData.state === status.COMPLETE
+          ? 'branch-btn-default branche-complete'
+          : 'branch-btn-default'
+      "
+      @click="openBranch(branchData.id)"
+    >
+      <svg
+        v-if="branchData.state === status.COMPLETE"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <use href="#check-icon"></use>
+      </svg>
+      <svg
+        v-if="branchData.state != status.COMPLETE"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <use href="#navigate-next-icon"></use>
+      </svg>
+    </app-base-button>
+  </div>
+</template>
+<script>
+import AppBaseButton from './AppBaseButton.vue'
+import { useI18n } from 'vue-i18n'
+export default {
+  components: { AppBaseButton },
+  props: {
+    mini: {
+      type: Boolean,
+      default: false
+    },
+    percent: {
+      type: [Number],
+      default: 0,
+      required: true
+    },
+    branchData: {
+      type: Object,
+      required: true
+    },
+    setTarget: {
+      type: [String],
+      default: ''
+    },
+
+    btnTitle: {
+      type: String,
+      default: null
+    }
+  },
+  setup() {
+    const { t } = useI18n()
+    return { t }
+  },
+  data() {
+    const svgRadius = 23
+    return {
+      radius: svgRadius,
+      circumference: svgRadius * 2 * Math.PI,
+      status: {
+        NEW: 'new',
+        STARTED: 'started',
+        COMPLETE: 'complete'
+      },
+      withRouter: false, //Only for demo purpose. Remove after demo
+      isActive: false,
+      currentPercent: 0
+    }
+  },
+
+  created() {
+    this.$bus.$on('branching-hidden', this.resetIsActive)
+  },
+
+  beforeUnmount() {
+    this.$bus.$off('branching-hidden', this.resetIsActive)
+  },
+
+  methods: {
+    openBranch(e) {
+      this.isActive = true
+      this.$bus.$emit('open-sidebar', { ctx: 'ctxBranching', e })
+    },
+
+    resetIsActive() {
+      this.isActive = false
+    }
+  }
+}
+</script>
+<style lang="scss">
+.button-progress-wrapper {
+  &.card-btn {
+    .branch-btn-default {
+      left: 5.5px;
+      top: 5.5px;
+      min-width: 40px;
+      min-height: 40px;
+    }
+  }
+}
+
+.button-progress-wrapper {
+  &:not(.card-btn) {
+    .branch-btn-default {
+      min-width: 42px;
+      min-height: 42px;
+    }
+  }
+}
+
+.button-progress-wrapper {
+  position: relative;
+
+  .progress-ring {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .branch-btn-default {
+    position: absolute;
+  }
+}
+</style>