@vue-interface/btn-activity 2.0.0-beta.2 → 2.0.0-beta.3

package/dist/btn-activity.es.js

@@ -178,7 +178,10 @@ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
   return s || 0;
 }, h = function(t, e) {
   const i = (t.ownerDocument || document).defaultView;
-  setTimeout(e, D(i == null ? void 0 : i.getComputedStyle(t).animationDuration));
+  setTimeout(
+    e,
+    D(i == null ? void 0 : i.getComputedStyle(t).animationDuration)
+  );
 }, L = {
   name: "BtnActivity",
   components: {
@@ -221,15 +224,21 @@ const W = /* @__PURE__ */ N(k, [["render", H]]), D = function(t) {
         active: this.active,
         "btn-activity": this.activity,
         [`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this.orientation,
-        [`'btn-activity-indicator-${this.indicatorProps.type.replace("btn-activity-indicator-", "")}`]: !!this.indicatorProps.type
+        [`'btn-activity-indicator-${this.indicatorProps.type.replace(
+          "btn-activity-indicator-",
+          ""
+        )}`]: !!this.indicatorProps.type
       };
     },
     indicatorProps() {
-      return Object.assign({
-        type: "spinner"
-      }, (typeof this.indicator == "string" ? {
-        type: this.indicator
-      } : this.indicator) || {});
+      return Object.assign(
+        {
+          type: "spinner"
+        },
+        (typeof this.indicator == "string" ? {
+          type: this.indicator
+        } : this.indicator) || {}
+      );
     }
   },
   watch: {

package/dist/src/BtnActivity.vue.d.ts

@@ -43,11 +43,7 @@ declare const _sfc_main: {
                     minWidth: string | undefined;
                     height: string | undefined;
                     maxHeight: string | undefined;
-                    minHeight: string | undefined; /**
-                     * Disable the button.
-                     *
-                     * @property {Boolean}
-                     */
+                    minHeight: string | undefined;
                 };
             };
             mounted(): Promise<void>;
@@ -81,15 +77,15 @@ declare const _sfc_main: {
                 };
             })[];
             props: {
-                active: BooleanConstructor;
+                active: BooleanConstructor; /**
+                 * Make the button appear with the active state.
+                 *
+                 * @property {Boolean}
+                 */
                 block: BooleanConstructor;
                 componentPrefix: {
                     type: StringConstructor;
-                    default: string; /**
-                     * Display the button as block width.
-                     *
-                     * @property {Boolean}
-                     */
+                    default: string;
                 };
                 disabled: BooleanConstructor;
                 label: StringConstructor;
@@ -194,7 +190,7 @@ declare const _sfc_main: {
             [x: string]: any;
             disabled: any;
             active: any;
-            'btn-activity': any;
+            "btn-activity": any;
         };
         indicatorProps(): any;
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vue-interface/btn-activity",
-  "version": "2.0.0-beta.2",
+  "version": "2.0.0-beta.3",
   "description": "A Vue activity button component.",
   "files": [
     "index.js",

package/src/BtnActivity.vue

@@ -1,266 +1,271 @@
 <script lang="ts">
-import { ActivityIndicator } from '@vue-interface/activity-indicator';
-import { Btn } from '@vue-interface/btn';
+import { ActivityIndicator } from "@vue-interface/activity-indicator";
+import { Btn } from "@vue-interface/btn";
 
-const convertAnimationDelayToInt = function(delay: any) {
-    const num = parseFloat(delay || 0);
-    const matches = delay && delay.match(/m?s/);
-    const unit = matches ? matches[0] : false;
+const convertAnimationDelayToInt = function (delay: any) {
+  const num = parseFloat(delay || 0);
+  const matches = delay && delay.match(/m?s/);
+  const unit = matches ? matches[0] : false;
 
-    let milliseconds;
+  let milliseconds;
 
-    switch (unit) {
-    case 's': // seconds
-        milliseconds = num * 1000;
-        break;
-    case 'ms':
+  switch (unit) {
+    case "s": // seconds
+      milliseconds = num * 1000;
+      break;
+    case "ms":
     default:
-        milliseconds = num;
-        break;
-    }
+      milliseconds = num;
+      break;
+  }
 
-    return milliseconds || 0;
+  return milliseconds || 0;
 };
 
-const animated = function(el: HTMLElement, callback: Function) {
-    const defaultView = (el.ownerDocument || document).defaultView;
+const animated = function (el: HTMLElement, callback: Function) {
+  const defaultView = (el.ownerDocument || document).defaultView;
 
-    setTimeout(callback, convertAnimationDelayToInt(defaultView?.getComputedStyle(el).animationDuration));
+  setTimeout(
+    callback,
+    convertAnimationDelayToInt(defaultView?.getComputedStyle(el).animationDuration)
+  );
 };
 
 export default {
-
-    name: 'BtnActivity',
-    
-    components: {
-        ActivityIndicator,
-        Btn
+  name: "BtnActivity",
+
+  components: {
+    ActivityIndicator,
+    Btn,
+  },
+
+  props: {
+    /**
+     * Make the button appear with the active state.
+     *
+     * @property {Boolean}
+     */
+    active: Boolean,
+
+    /**
+     * Show the activity indicator inside the button.
+     *
+     * @property {Boolean}
+     */
+    activity: Boolean,
+
+    /**
+     * Display the button as block width.
+     *
+     * @property {Boolean}
+     */
+    block: Boolean,
+
+    /**
+     * Disable the button.
+     *
+     * @property {Boolean}
+     */
+    disabled: Boolean,
+
+    /**
+     * The type of activity indicator inside the button.
+     *
+     * @property {String}
+     */
+    indicator: {
+      type: [Object, String],
+      default: "spinner",
     },
 
-    props: {
-
-        /**
-         * Make the button appear with the active state.
-         *
-         * @property {Boolean}
-         */
-        active: Boolean,
-
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @property {Boolean}
-         */
-        activity: Boolean,
-
-        /**
-         * Display the button as block width.
-         *
-         * @property {Boolean}
-         */
-        block: Boolean,
-
-        /**
-         * Disable the button.
-         *
-         * @property {Boolean}
-         */
-        disabled: Boolean,
-
-        /**
-         * The type of activity indicator inside the button.
-         *
-         * @property {String}
-         */
-        indicator: {
-            type: [Object, String],
-            default: 'spinner'
-        },
-
-        /**
-         * The button label.
-         *
-         * @property {String}
-         */
-        label: String,
-
-        /**
-         * The orientation of the activity button inside the button.
-         *
-         * @property {String}
-         */
-        orientation: {
-            type: String,
-            default: 'right'
-        },
+    /**
+     * The button label.
+     *
+     * @property {String}
+     */
+    label: String,
+
+    /**
+     * The orientation of the activity button inside the button.
+     *
+     * @property {String}
+     */
+    orientation: {
+      type: String,
+      default: "right",
+    },
 
-        /**
-         * The size of the button.
-         *
-         * @property {String}
-         */
-        size: {
-            type: String,
-            default: 'md'
-        },
+    /**
+     * The size of the button.
+     *
+     * @property {String}
+     */
+    size: {
+      type: String,
+      default: "md",
+    },
 
-        /**
-         * The HTML tag.
-         *
-         * @property {String}
-         */
-        tag: String,
-
-        /**
-         * The variant of the button.
-         *
-         * @property {String}
-         */
-        variant: {
-            type: String,
-            default: 'primary'
-        }
+    /**
+     * The HTML tag.
+     *
+     * @property {String}
+     */
+    tag: String,
+
+    /**
+     * The variant of the button.
+     *
+     * @property {String}
+     */
+    variant: {
+      type: String,
+      default: "primary",
     },
-    
-    data() {
-        return {
-            currentActivity: this.activity
-        };
+  },
+
+  data() {
+    return {
+      currentActivity: this.activity,
+    };
+  },
+
+  computed: {
+    /**
+     * An object of classes to append to the button.
+     *
+     * @return void
+     */
+    classes() {
+      return {
+        disabled: this.disabled,
+        active: this.active,
+        "btn-activity": this.activity,
+        [`btn-activity-${this.orientation.replace("btn-activity-", "")}`]: !!this
+          .orientation,
+        [`'btn-activity-indicator-${this.indicatorProps.type.replace(
+          "btn-activity-indicator-",
+          ""
+        )}`]: !!this.indicatorProps.type,
+      };
     },
 
-    computed: {
-
-        /**
-         * An object of classes to append to the button.
-         *
-         * @return void
-         */
-        classes() {
-            return {
-                'disabled': this.disabled,
-                'active': this.active,
-                'btn-activity': this.activity,
-                [`btn-activity-${this.orientation.replace('btn-activity-', '')}`]: !!this.orientation,
-                [`'btn-activity-indicator-${this.indicatorProps.type.replace('btn-activity-indicator-', '')}`]: !!this.indicatorProps.type,
-            };
+    indicatorProps() {
+      return Object.assign(
+        {
+          type: "spinner",
         },
-
-        indicatorProps() {
-            return Object.assign({
-                type: 'spinner'
-            }, (typeof this.indicator === 'string' ? {
-                type: this.indicator
-            } : this.indicator) || {});
-        }
-
-    },
-
-    watch: {
-
-        activity(value: boolean) {
-            if(value) {
-                this.showActivity();
+        (typeof this.indicator === "string"
+          ? {
+              type: this.indicator,
             }
-            else {
-                this.hideActivity();
-            }
-        }
-
+          : this.indicator) || {}
+      );
     },
-
-    mounted() {
-        if(this.activity) {
-            this.showActivity();
-        }
+  },
+
+  watch: {
+    activity(value: boolean) {
+      if (value) {
+        this.showActivity();
+      } else {
+        this.hideActivity();
+      }
     },
+  },
 
-    methods: {
-
-        /**
-         * Disable the button.
-         *
-         * @return void
-         */
-        disable() {
-            this.$el.disabled = true;
-            this.$el.classList.add('disabled');
-        },
-
-        /**
-         * Enable the button.
-         *
-         * @return void
-         */
-        enable() {
-            this.$el.disabled = false;
-            this.$el.classList.remove('disabled');
-        },
-
-        /**
-         * Hide the activity indicator inside the button.
-         *
-         * @return void
-         */
-        hideActivity() {
-            this.$el.classList.add('btn-hide-activity');
-
-            animated(this.$el, () => {
-                this.enable();
-                this.currentActivity = false;
-                this.$el.classList.remove('btn-activity', 'btn-hide-activity');
-                this.$emit('hide-activity');
-            });
-        },
+  mounted() {
+    if (this.activity) {
+      this.showActivity();
+    }
+  },
+
+  methods: {
+    /**
+     * Disable the button.
+     *
+     * @return void
+     */
+    disable() {
+      this.$el.disabled = true;
+      this.$el.classList.add("disabled");
+    },
 
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @return void
-         */
-        showActivity() {
-            this.currentActivity = true;
-            this.disable();
-
-            animated(this.$el, () => {
-                this.$el.classList.add('btn-activity');
-                this.$emit('show-activity');
-            });
-        },
+    /**
+     * Enable the button.
+     *
+     * @return void
+     */
+    enable() {
+      this.$el.disabled = false;
+      this.$el.classList.remove("disabled");
+    },
 
-        /**
-         * Show the activity indicator inside the button.
-         *
-         * @return void
-         */
-        toggle() {
-            if(!this.currentActivity) {
-                this.showActivity();
-            }
-            else {
-                this.hideActivity();
-            }
-        }
+    /**
+     * Hide the activity indicator inside the button.
+     *
+     * @return void
+     */
+    hideActivity() {
+      this.$el.classList.add("btn-hide-activity");
+
+      animated(this.$el, () => {
+        this.enable();
+        this.currentActivity = false;
+        this.$el.classList.remove("btn-activity", "btn-hide-activity");
+        this.$emit("hide-activity");
+      });
+    },
 
-    }
+    /**
+     * Show the activity indicator inside the button.
+     *
+     * @return void
+     */
+    showActivity() {
+      this.currentActivity = true;
+      this.disable();
+
+      animated(this.$el, () => {
+        this.$el.classList.add("btn-activity");
+        this.$emit("show-activity");
+      });
+    },
 
+    /**
+     * Show the activity indicator inside the button.
+     *
+     * @return void
+     */
+    toggle() {
+      if (!this.currentActivity) {
+        this.showActivity();
+      } else {
+        this.hideActivity();
+      }
+    },
+  },
 };
 </script>
 
 <style>
 @keyframes btn-activity-in {
-    0%, 100% {
-        transform: scale(1);
-    } 30% {
-        transform: scale(.98);
-    }
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  30% {
+    transform: scale(0.98);
+  }
 }
 
 @keyframes btn-activity-out {
-    0%, 100% {
-        transform: scale(1);
-    } 70% {
-        transform: scale(.98);
-    }
+  0%,
+  100% {
+    transform: scale(1);
+  }
+  70% {
+    transform: scale(0.98);
+  }
 }
 
 .btn-activity-top,
@@ -271,79 +276,79 @@ export default {
 .btn.btn-activity-left,
 .btn-activity-right,
 .btn.btn-activity-right {
-    display: inline-flex;
-    position: relative;
-    transition: all calc(333ms / 2) ease-in;
+  display: inline-flex;
+  position: relative;
+  transition: all calc(333ms / 2) ease-in;
 }
 
 .btn-activity-top .activity-indicator,
 .btn-activity-bottom .activity-indicator,
 .btn-activity-left .activity-indicator,
 .btn-activity-right .activity-indicator {
-    opacity: 0;
-    position: absolute;
-    visibility: hidden;
-    transition: opacity 333ms ease-in;
+  opacity: 0;
+  position: absolute;
+  visibility: hidden;
+  transition: opacity 333ms ease-in;
 }
 
 .btn-activity-top,
 .btn-activity-bottom {
-    flex-direction: column;
-    align-items: center;
+  flex-direction: column;
+  align-items: center;
 }
 
 .btn-activity-top .activity-indicator,
 .btn-activity-bottom .activity-indicator {
-    margin-left: auto;
-    margin-right: auto;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .btn-activity-top {
-    flex-direction: column-reverse;
+  flex-direction: column-reverse;
 }
 
 .btn-activity-top .activity-indicator {
-    padding-bottom: 1em;
+  padding-bottom: 1em;
 }
 
 .btn-activity-bottom .activity-indicator {
-    padding-top: 1em;
+  padding-top: 1em;
 }
 
 .btn-activity-left,
 .btn-activity-right {
-    align-items: center;
-    justify-content: center;
+  align-items: center;
+  justify-content: center;
 }
 
 .btn-activity-left {
-    flex-direction: row-reverse;
+  flex-direction: row-reverse;
 }
 
 .btn-activity-left .activity-indicator {
-    padding-right: 1em;
+  padding-right: 1em;
 }
 
 .btn-activity-right .activity-indicator {
-    padding-left: 1em;
+  padding-left: 1em;
 }
 
 .btn-activity:not(.btn-link) {
-    animation: btn-activity-in 333ms;
+  animation: btn-activity-in 333ms;
 }
 
 .btn-hide-activity:not(.btn-link) {
-    animation: btn-activity-out 333ms;
+  animation: btn-activity-out 333ms;
 }
 
 .btn-activity.btn-hide-activity .activity-indicator {
-    opacity: 0;
+  opacity: 0;
 }
 
 .btn-activity .activity-indicator {
-    opacity: 1;
-    visibility: visible;
-    position: relative;
-    font-size: .55em;
+  opacity: 1;
+  visibility: visible;
+  position: relative;
+  font-size: 0.55em;
 }
 </style>