@dialpad/dialtone-vue/dist/lib/description-list/description-list.cjs.map

Vue component library for Dialpad's design system Dialtone

{"version":3,"file":"description-list.cjs","sources":["../../../components/description_list/description_list.vue"],"sourcesContent":["<template>\n  <dl :class=\"['d-description-list', getDirectionClass, getGapClass]\">\n    <template\n      v-for=\"item in items\"\n    >\n      <dt\n        :key=\"`dt-${item.term}`\"\n        :class=\"dtClass\"\n      >\n        {{ item.term }}\n      </dt>\n      <dd\n        :key=\"`dd-${item.term}`\"\n        :class=\"ddClass\"\n      >\n        {{ item.description }}\n      </dd>\n    </template>\n  </dl>\n</template>\n\n<script>\nimport { DT_STACK_GAP } from '@/components/stack';\nimport { DT_DESCRIPTION_LIST_DIRECTION } from './description_list_constants';\nimport { itemsValidator } from './description_list_validators';\n\nexport default {\n  name: 'DtDescriptionList',\n\n  props: {\n    /**\n     * The direction for the list\n     * @values row, column\n     */\n    direction: {\n      type: String,\n      default: 'row',\n      validator: direction => DT_DESCRIPTION_LIST_DIRECTION.includes(direction),\n    },\n\n    /**\n     * A list of items that represent the term and the description\n     */\n    items: {\n      type: Array,\n      default: () => [],\n      validator: items => itemsValidator(items),\n      required: true,\n    },\n\n    /**\n     * Set the space between the elements\n     * @values 0, 100, 200, 300, 400, 500, 600\n     */\n    gap: {\n      type: String,\n      default: '400',\n      validator: (gap) => DT_STACK_GAP.includes(gap),\n    },\n\n    /**\n     * Used to customize the term element\n     */\n    termClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * Used to customize the description element\n     */\n    descriptionClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n  },\n\n  computed: {\n    dtClass () {\n      return ['d-description-list__term', this.termClass];\n    },\n\n    ddClass () {\n      return ['d-description-list__description', this.descriptionClass];\n    },\n\n    getDirectionClass () {\n      return `d-description-list--${this.direction}`;\n    },\n\n    getGapClass () {\n      return `d-description-list--gap-${this.gap}`;\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","direction","DT_DESCRIPTION_LIST_DIRECTION","items","itemsValidator","gap","DT_STACK_GAP"],"mappings":"iTA0BAA,EAAA,CACA,KAAA,oBAEA,MAAA,CAKA,UAAA,CACA,KAAA,OACA,QAAA,MACA,UAAAC,GAAAC,gCAAA,SAAAD,CAAA,CACA,EAKA,MAAA,CACA,KAAA,MACA,QAAA,IAAA,CAAA,EACA,UAAAE,GAAAC,EAAAA,eAAAD,CAAA,EACA,SAAA,EACA,EAMA,IAAA,CACA,KAAA,OACA,QAAA,MACA,UAAAE,GAAAC,eAAA,SAAAD,CAAA,CACA,EAKA,UAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,EAKA,iBAAA,CACA,KAAA,CAAA,OAAA,MAAA,MAAA,EACA,QAAA,EACA,CACA,EAEA,SAAA,CACA,SAAA,CACA,MAAA,CAAA,2BAAA,KAAA,SAAA,CACA,EAEA,SAAA,CACA,MAAA,CAAA,kCAAA,KAAA,gBAAA,CACA,EAEA,mBAAA,CACA,MAAA,uBAAA,KAAA,SAAA,EACA,EAEA,aAAA,CACA,MAAA,2BAAA,KAAA,GAAA,EACA,CACA,CACA"}