@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
82 lines (81 loc) • 2.38 kB
JavaScript
import { DT_STACK_GAP } from "../stack/stack_constants.js";
import { DT_DESCRIPTION_LIST_DIRECTION } from "./description_list_constants.js";
import { itemsValidator } from "./description_list_validators.js";
import normalizeComponent from "../../_virtual/_plugin-vue2_normalizer.js";
const _sfc_main = {
name: "DtDescriptionList",
props: {
/**
* The direction for the list
* @values row, column
*/
direction: {
type: String,
default: "row",
validator: (direction) => DT_DESCRIPTION_LIST_DIRECTION.includes(direction)
},
/**
* A list of items that represent the term and the description
*/
items: {
type: Array,
default: () => [],
validator: (items) => itemsValidator(items),
required: true
},
/**
* Set the space between the elements
* @values 0, 100, 200, 300, 400, 500, 600
*/
gap: {
type: String,
default: "400",
validator: (gap) => DT_STACK_GAP.includes(gap)
},
/**
* Used to customize the term element
*/
termClass: {
type: [String, Array, Object],
default: ""
},
/**
* Used to customize the description element
*/
descriptionClass: {
type: [String, Array, Object],
default: ""
}
},
computed: {
dtClass() {
return ["d-description-list__term", this.termClass];
},
ddClass() {
return ["d-description-list__description", this.descriptionClass];
},
getDirectionClass() {
return `d-description-list--${this.direction}`;
},
getGapClass() {
return `d-description-list--gap-${this.gap}`;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("dl", { class: ["d-description-list", _vm.getDirectionClass, _vm.getGapClass] }, [_vm._l(_vm.items, function(item) {
return [_c("dt", { key: `dt-${item.term}`, class: _vm.dtClass }, [_vm._v(" " + _vm._s(item.term) + " ")]), _c("dd", { key: `dd-${item.term}`, class: _vm.ddClass }, [_vm._v(" " + _vm._s(item.description) + " ")])];
})], 2);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const description_list = __component__.exports;
export {
description_list as default
};
//# sourceMappingURL=description_list.vue.js.map