fcad-core-dragon 2.0.0-beta.1 → 2.0.0-beta.3

package/src/components/AppBaseButton.vue

@@ -1,63 +1,87 @@
-<template>
-  <!--
- @ Description: This component is used to create button
- @ What it does: emit click event
--->
-
-  <button
-    type="button"
-    class="btn"
-    :class="{ click: isClick, 'btn-visited': isVisited }"
-    :disabled="isActive"
-    @click="click"
-    @focus="focus"
-  >
-    <slot>Button</slot>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'AppBaseButton',
-  props: {
-    isActive: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {
-      isClick: false,
-      isVisited: false
-    }
-  },
-  methods: {
-    /**
-     * @fires click to parent component or page
-     */
-    click() {
-      this.$emit('click', this.$el)
-      this.isClick = !this.isClick
-      if (!this.isVisited) {
-        this.isVisited = true
-      }
-    },
-    /**
-     * @fires click to parent component or page
-     */
-    focus() {
-      this.$emit('focus', this.$el)
-    }
-  }
-}
-</script>
-<style lang="scss">
-.btn {
-  display: flex;
-  align-items: center;
-
-  &.md_disabled {
-    pointer-events: none;
-  }
-}
-</style>
+<template>
+  <!--
+ @ Description: This component is used to create button
+ @ What it does: emit click event
+-->
+
+  <button
+    :type="type"
+    class="btn"
+    :class="{ click: isClick, 'btn-visited': isVisited, md_disabled: isActive }"
+    :aria-disabled="isActive ? true : null"
+    @click="click"
+    @focus="focus"
+    @blur="blur"
+    @mouseenter="mouseenter"
+    @mouseleave="mouseleave"
+  >
+    <slot>Button</slot>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'AppBaseButton',
+  props: {
+    isActive: {
+      type: Boolean,
+      default: false
+    },
+    type: {
+      type: String,
+      default: 'button'
+    }
+  },
+  emits: ['click', 'focus', 'blur', 'mouseenter', 'mouseleave'],
+  data() {
+    return {
+      isClick: false,
+      isVisited: false
+    }
+  },
+  methods: {
+    /**
+     * @fires click to parent component or page
+     */
+    click() {
+      if (this.isActive) return // prevent bouton action on click if button not available
+
+      this.$emit('click', this.$el)
+      this.isClick = !this.isClick
+      if (!this.isVisited) {
+        this.isVisited = true
+      }
+    },
+    /**
+     * @fires focus to parent component or page
+     */
+    focus() {
+      this.$emit('focus', this.$el)
+    },
+    /**
+     * @fires blur to parent component or page
+     */
+    blur() {
+      this.$emit('blur', this.$el)
+    },
+    /**
+     * @fires mouseenter to parent component or page
+     */
+    mouseenter() {
+      this.$emit('mouseenter', this.$el)
+    },
+    /**
+     * @fires mouseenter to parent component or page
+     */
+    mouseleave() {
+      this.$emit('mouseleave', this.$el)
+    }
+  }
+}
+</script>
+<style lang="scss">
+.btn {
+  display: flex;
+  align-items: center;
+}
+</style>