feat: Add button component (#9276)

* feat: Add button component * chore: code cleanup * chore: code cleanup * feat: update styles * chore: cleanup button * chore: review comments * chore: code cleanup * chore: review comments * chore: fix spacing * chore: remove unused code * chore: remove custom click event * feat: update props validation * chore: review comments * refactor: use trailingIcon as a boolean prop * fix: build issues --------- Co-authored-by: Shivam Mishra <scm.mymail@gmail.com>
2024-04-25 14:21:23 +05:30
parent 2ddf613c58
commit 04ae38076f
2 changed files with 136 additions and 36 deletions
--- a/app/javascript/v3/components/Form/Button.vue
+++ b/app/javascript/v3/components/Form/Button.vue
@@ -0,0 +1,99 @@
+<template>
+  <button
+    class="inline-flex items-center gap-1 text-sm font-medium reset-base rounded-xl w-fit"
+    :class="buttonClasses"
+    v-bind="$attrs"
+  >
+    <fluent-icon
+      v-if="icon && !trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+    <span
+      v-if="$slots.default"
+      class="text-sm font-medium truncate ltr:text-left rtl:text-right"
+    >
+      <slot />
+    </span>
+    <fluent-icon
+      v-if="icon && trailingIcon"
+      size="1.16em"
+      :icon="icon"
+      class="flex-shrink-0"
+    />
+  </button>
+</template>
+<script setup>
+import { computed, defineProps, useAttrs } from 'vue';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'solid',
+    validator: value => ['outline', 'ghost', 'solid'].includes(value),
+  },
+  size: {
+    type: String,
+    default: 'large',
+    validator: value => ['medium', 'large'].includes(value),
+  },
+  icon: {
+    type: String,
+    default: '',
+  },
+  colorScheme: {
+    type: String,
+    default: 'primary',
+    validator: value => ['primary', 'secondary', 'danger'].includes(value),
+  },
+  trailingIcon: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const attrs = useAttrs();
+
+const baseClasses = {
+  outline: 'outline outline-1 -outline-offset-1 focus:ring focus:ring-offset-1',
+  ghost: 'hover:text-600 active:text-600 focus:ring focus:ring-offset-1',
+  solid: 'hover:bg-700 active:bg-700 focus:ring focus:ring-offset-1',
+};
+
+const colorClass = computed(() => {
+  if (attrs.disabled) {
+    return 'bg-ash-200 text-ash-600 cursor-not-allowed';
+  }
+
+  const styleMap = {
+    primary: {
+      outline: `${baseClasses.outline} outline-primary-400 hover:text-primary-600 active:text-primary-600 focus:ring-primary-400`,
+      ghost: `${baseClasses.ghost} focus:ring-primary-400`,
+      solid: `${baseClasses.solid} bg-primary-600 text-white focus:ring-primary-400`,
+    },
+    secondary: {
+      outline: `${baseClasses.outline} outline-ash-400 hover:text-ash-600 active:text-ash-600 focus:ring-ash-400`,
+      ghost: `${baseClasses.ghost} focus:ring-ash-400`,
+      solid: `${baseClasses.solid} bg-ash-100 text-ash-900 focus:ring-ash-400`,
+    },
+    danger: {
+      outline: `${baseClasses.outline} outline-ruby-400 hover:text-ruby-600 active:text-ruby-600 focus:ring-ruby-400`,
+      ghost: `${baseClasses.ghost} focus:ring-ruby-400`,
+      solid: `${baseClasses.solid} bg-ruby-600 text-white focus:ring-ruby-400`,
+    },
+  };
+
+  const schemeStyles = styleMap[props.colorScheme];
+  return schemeStyles[props.variant] || schemeStyles.solid;
+});
+
+const sizeClass = computed(() => {
+  if (props.size === 'medium') {
+    return 'h-8 px-3 py-1.5 text-sm';
+  }
+  return 'h-10 px-4 py-2.5 text';
+});
+
+const buttonClasses = computed(() => [colorClass.value, sizeClass.value]);
+</script>