feat: add button component

2024-04-19 13:49:22 +05:30
parent 25ad9eee61
commit 7c28d2124c
8 changed files with 403 additions and 51 deletions
@@ -0,0 +1,140 @@
+<template>
+  <button
+    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
+    :type="type"
+    :class="buttonClasses"
+    :disabled="isDisabled || isLoading"
+    @click="handleClick"
+  >
+    <fluent-icon :size="iconSize" :icon="icon" class="flex-shrink-0" />
+    <span
+      v-if="$slots.default"
+      class="text-sm font-medium truncate"
+      :class="{ 'text-left rtl:text-right': size !== 'expanded' }"
+    >
+      <slot />
+    </span>
+    <fluent-icon :size="iconSize" icon="chevron-right" class="flex-shrink-0" />
+  </button>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'submit',
+    },
+    variant: {
+      type: String,
+      default: '',
+    },
+    size: {
+      type: String,
+      default: '',
+    },
+    icon: {
+      type: String,
+      default: '',
+    },
+    emoji: {
+      type: String,
+      default: '',
+    },
+    colorScheme: {
+      type: String,
+      default: 'primary',
+    },
+    classNames: {
+      type: [String, Object],
+      default: '',
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    isLoading: {
+      type: Boolean,
+      default: false,
+    },
+    isExpanded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    // variantClasses() {
+    //   if (this.variant.includes('link')) {
+    //     return `clear ${this.variant}`;
+    //   }
+    //   return this.variant;
+    // },
+    // hasOnlyIcon() {
+    //   const hasEmojiOrIcon = this.emoji || this.icon;
+    //   return !this.$slots.default && hasEmojiOrIcon;
+    // },
+    // hasOnlyIconClasses() {
+    //   return this.hasOnlyIcon ? 'button--only-icon' : '';
+    // },
+
+    buttonClasses() {
+      return [
+        this.colorClass,
+        this.sizeClass,
+        // this.variantClasses,
+        // this.hasOnlyIconClasses,
+        // this.size,
+        // this.colorClass,
+        // this.classNames,
+        // this.isDisabled ? 'disabled' : '',
+        // this.isExpanded ? 'expanded' : '',
+      ];
+    },
+    colorClass() {
+      if (this.colorScheme === 'primary') {
+        return 'bg-primary-600 text-white hover:bg-primary-700 active:bg-primary-700 focus:ring focus:ring-offset-1 focus:ring-primary-400';
+      }
+      if (this.colorScheme === 'secondary') {
+        return 'bg-ash-100 text-white hover:bg-ash-200 active:bg-ash-200 focus:ring focus:ring-offset-1 focus:ring-ash-400';
+      }
+      if (this.colorScheme === 'danger') {
+        return 'bg-ruby-600 text-white hover:bg-ruby-700 active:bg-ruby-700 focus:ring focus:ring-offset-1 focus:ring-ruby-400';
+      }
+      return 'bg-primary-500 text-white';
+    },
+    sizeClass() {
+      if (this.size === 'md') {
+        return 'px-3 py-2 text-sm';
+      }
+      return 'px-4 py-2.5 text';
+    },
+    iconSize() {
+      switch (this.size) {
+        case 'tiny':
+          return 12;
+        case 'small':
+          return 14;
+        case 'medium':
+          return 16;
+        case 'large':
+          return 18;
+
+        default:
+          return 16;
+      }
+    },
+    showDarkSpinner() {
+      return (
+        this.colorScheme === 'secondary' ||
+        this.variant === 'clear' ||
+        this.variant === 'link' ||
+        this.variant === 'hollow'
+      );
+    },
+  },
+  methods: {
+    handleClick(evt) {
+      this.$emit('click', evt);
+    },
+  },
+};
+</script>