Componente

Introducción

Este componente renderizará un listado de botones con links. El mismo se compone de dos partes, una de renderizado y otra de logica ir-button-list-bone, esta ultima será la encargada de el manejo de los datos así sean ingresados por propiedades o por consulta a la capa de datos.

Uso

El componente espera recibir un arreglo de botones con la siguiente estructura desde la capa de datos.

  {
    "title": "Póliza",
    "icon": "mdi-tray-arrow-down",
    "link": "http://pdf.pdf"
  },
  {
    "title": "TITULAR",
    "subtitle": "Nombre persona",
    "titleStyle": {
      "font-size": "12px",
      "font-weight": "700",
      "color": "#41505F"
    }
  }

Ejemplo

Propiedades

Propiedad	Tipo	Default	Requerido	Descripción
buttons	Array	[]	false	Botones que se renderizarán dentro del componente.
title	String	''	false	Título componente.

Propiedades de buttons

Propiedad	Tipo	Default	Requerido	Descripción
title	String	''	false	Título que aparecerá dentro del botón.
titleStyle	Object	{ 'font-size': '16px', 'line-height': '24px', 'font-weight': '600', color: '#000000' }	false	Estilo que se le aplicará al título.
subtitle	String	''	false	Subtítulo que aparecerá dentro del botón.
subtitleStyle	Object	{ 'font-size': '16px', 'line-height': '24px', 'font-weight': '400', color: '#212121' }	false	Estilo que se le aplicará al subtítulo.
icon	String	''	false	ícono que aparecerá dentro del botón.
link	String	''	false	Link al cual redirigirá el botón. En caso de no tener link, no será clickeable.

Código fuente

<template>
  <ir-button-list-bone
    v-bind="$attrs"
    v-on="$listeners"
  >
    <template #default="{ buttons, title }">
      <v-card
        tile
        class="rounded-top rounded-bottom mx-auto custom-shadow"
      >
        <v-list
          dense
          class="pa-0"
        >
          <v-subheader v-if="title">{{ title }}</v-subheader>
          <v-list-item
            v-for="(
              {
                title: itemTitle,
                titleStyle,
                subtitle,
                subtitleStyle,
                icon,
                link
              },
              i
            ) in buttons"
            :key="i"
            :two-line="!!itemTitle && !!subtitle"
            class="py-1"
            :style="!link ? 'pointer-events: none;' : ''"
            :class="getBorder(i, buttons.length)"
            @click="redirect(link)"
          >
            <v-list-item-content class="pa-0">
              <v-list-item-title
                v-if="itemTitle"
                :style="getTitleStyle(titleStyle)"
              >
                {{ itemTitle }}
              </v-list-item-title>
              <v-list-item-title
                v-if="subtitle"
                :style="getSubtitleStyle(subtitleStyle)"
              >
                {{ subtitle }}
              </v-list-item-title>
            </v-list-item-content>
            <v-list-item-icon v-if="icon">
              <v-icon size="22">
                {{ icon }}
              </v-icon>
            </v-list-item-icon>
          </v-list-item>
        </v-list>
      </v-card>
    </template>
  </ir-button-list-bone>
</template>

<script>
import { ref, onMounted } from 'vue'
import { buttonListComponentName } from '../../constants'
import IrButtonListBone from './IrButtonListBone.vue'
import { border, redirectLink } from './IrButtonList.js'
export default {
  name: buttonListComponentName,
  components: {
    IrButtonListBone
  },
  inheritAttrs: false,
  setup(_, { attrs }) {
    const getBorder = (index, length) => border(index, length)
    const otherProps = ref({})
    const redirect = (link) => redirectLink(link)
    const titleDefaultStyle = ref({
      'font-size': '16px',
      'line-height': '24px',
      'font-weight': '600',
      color: '#000000'
    })
    const subtitleDefaultStyle = ref({
      'font-size': '16px',
      'line-height': '24px',
      'font-weight': '400',
      color: '#212121'
    })
    const getTitleStyle = (itemStyle) => {
      let style = { ...titleDefaultStyle.value }
      style = { ...style, ...itemStyle }
      return style
    }
    const getSubtitleStyle = (itemStyle) => {
      let style = { ...subtitleDefaultStyle.value }
      style = { ...style, ...itemStyle }
      return style
    }
    onMounted(() => {
      let aux = { ...attrs }
      Object.assign(otherProps.value, aux)
    })
    return {
      getBorder,
      redirect,
      getTitleStyle,
      getSubtitleStyle
    }
  }
}
</script>

<style lang="scss" scoped>
.rounded-top {
  border-top-right-radius: 8px !important;
  border-top-left-radius: 8px !important;
}
.rounded-bottom {
  border-bottom-right-radius: 8px !important;
  border-bottom-left-radius: 8px !important;
}
.custom-shadow {
  box-shadow: 0px 4px 15px 0px #d9d9d9;
}
.border-bottom {
  border-bottom: 1px solid #cfcfcf;
}
</style>