Manager

Back Back Up Advanced Editor

const sizeClass = computed(() => {
  return {
    'px-2.5 py-1.5 text-xs leading-4 rounded': props.size === 'xs',
    'px-3 py-2 text-sm leading-4 rounded-md': props.size == 'sm',
    'px-4 py-2 text-sm leading-5 rounded-md': props.size === 'md',
    'px-4 py-2 text-base leading-6 rounded-md': props.size === 'lg',
    'px-6 py-3 text-base leading-6 rounded-md': props.size === 'xl',
  }
})

const placeHolderSize = computed(() => {
  switch (props.size) {
    case 'xs':
      return '32'
    case 'sm':
      return '38'
    case 'md':
      return '42'
    case 'lg':
      return '42'
    case 'xl':
      return '46'
    default:
      return ''
  }
})

const variantClass = computed(() => {
  return {
    'border-transparent shadow-sm text-white bg-primary-600 hover:bg-primary-700 focus:ring-primary-500':
      props.variant === 'primary',
    'border-transparent text-primary-700 bg-primary-100 hover:bg-primary-200 focus:ring-primary-500':
      props.variant === 'secondary',
    'border-solid border-primary-500 font-normal transition ease-in-out duration-150 text-primary-500 hover:bg-primary-200 shadow-inner focus:ring-primary-500':
      props.variant == 'primary-outline',
    'border-gray-200 text-gray-700 bg-white hover:bg-gray-50 focus:ring-primary-500 focus:ring-offset-0':
      props.variant == 'white',
    'border-transparent shadow-sm text-white bg-red-600 hover:bg-red-700 focus:ring-red-500':
      props.variant === 'danger',
    'border-transparent bg-gray-200 border hover:bg-opacity-60 focus:ring-gray-500 focus:ring-offset-0':
      props.variant === 'gray',
  }
})

const roundedClass = computed(() => {
  return props.rounded ? '!rounded-full' : ''
})

const iconLeftClass = computed(() => {
  return {
    '-ml-0.5 mr-2 h-4 w-4': props.size == 'sm',
    '-ml-1 mr-2 h-5 w-5': props.size === 'md',
    '-ml-1 mr-3 h-5 w-5': props.size === 'lg' || props.size === 'xl',
  }
})

const iconVariantClass = computed(() => {
  return {
    'text-white': props.variant === 'primary',
    'text-primary-700': props.variant === 'secondary',
    'text-gray-700': props.variant === 'white',
    'text-gray-400': props.variant === 'gray',
  }
})

const iconRightClass = computed(() => {
  return {
    'ml-2 -mr-0.5 h-4 w-4': props.size == 'sm',
    'ml-2 -mr-1 h-5 w-5': props.size === 'md',
    'ml-3 -mr-1 h-5 w-5': props.size === 'lg' || props.size === 'xl',
  }
})
</script>