@dialpad/dialtone/dist/vue2/components/description_list/description_list.vue.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"description_list.vue.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 '../stack/stack_constants';\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":["DT_DESCRIPTION_LIST_DIRECTION","itemsValidator","DT_STACK_GAP"],"mappings":";;;;;;AA0BA,MAAA,YAAA;AAAA,EACA,MAAA;AAAA,EAEA,OAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,eAAAA,yDAAA,SAAA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,OAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA,MAAA,CAAA;AAAA,MACA,WAAA,WAAAC,4BAAA,eAAA,KAAA;AAAA,MACA,UAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMA,KAAA;AAAA,MACA,MAAA;AAAA,MACA,SAAA;AAAA,MACA,WAAA,CAAA,QAAAC,6BAAA,SAAA,GAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,WAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA;AAAA;AAAA;AAAA,IAKA,kBAAA;AAAA,MACA,MAAA,CAAA,QAAA,OAAA,MAAA;AAAA,MACA,SAAA;AAAA,IACA;AAAA,EACA;AAAA,EAEA,UAAA;AAAA,IACA,UAAA;AACA,aAAA,CAAA,4BAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,UAAA;AACA,aAAA,CAAA,mCAAA,KAAA,gBAAA;AAAA,IACA;AAAA,IAEA,oBAAA;AACA,aAAA,uBAAA,KAAA,SAAA;AAAA,IACA;AAAA,IAEA,cAAA;AACA,aAAA,2BAAA,KAAA,GAAA;AAAA,IACA;AAAA,EACA;AACA;;;;;;;;;;;;;;;"}