All files FzIconButton.vue

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <FzButton @click="(e) => $emit('click', e)" :class="classes" :disabled="disabled" :size="size" :tooltip="tooltip"
    :variant="variantMap" overrideContainerClass>
    <FzIcon :name="iconName" :size="iconSize || mappedIconSize" :variant="iconVariant" :class="props.iconClass" />
    <div class="-mr-2 -mt-2" v-if="variant === 'notification'" :class="notificationClasses"></div>
  </FzButton>
</template>

<script lang="ts" setup>
  import { computed } from 'vue'
  import type { FzIconButtonProps } from './types'
  import { FzIcon } from '@fiscozen/icons'
  import FzButton from './FzButton.vue'
  import { iconSizeMap } from './utils'

  const props = withDefaults(
    defineProps<FzIconButtonProps>(),
    {
      variant: 'primary',
      size: 'md',
      disabled: false,
      iconVariant: 'far',
      iconPosition: 'before',
      iconClass: ''
    }
  )

  defineEmits(['click'])

  const variantMap = computed(() => {
    return props.variant === 'notification' ? 'secondary' : props.variant
  })

  const classes = computed(() => ({
    'size-24': props.size === 'xs',
    'w-28 h-28': props.size === 'sm',
    'w-32 h-32': props.size === 'md',
    'w-40 h-40': props.size === 'lg'
  }))

  const notificationClasses = computed(() => ({
    'rounded-full': true,
    'bg-blue-500': true,
    absolute: true,
    'top-0': true,
    'right-0': true,
    'size-4': props.size === 'xs',
    'w-6 h-6': props.size === 'sm',
    'w-8 h-8': props.size === 'md' || props.size === 'lg',
    'bg-grey-200': props.disabled
  }))

  const mappedIconSize = computed(() => iconSizeMap[props.size])
</script>