@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
82 lines (81 loc) • 2.61 kB
JavaScript
;
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const stack_constants = require("../stack/stack_constants.cjs");
const description_list_constants = require("./description_list_constants.cjs");
const description_list_validators = require("./description_list_validators.cjs");
const _pluginVue2_normalizer = require("../../_virtual/_plugin-vue2_normalizer.cjs");
const _sfc_main = {
name: "DtDescriptionList",
props: {
/**
* The direction for the list
* @values row, column
*/
direction: {
type: String,
default: "row",
validator: (direction) => description_list_constants.DT_DESCRIPTION_LIST_DIRECTION.includes(direction)
},
/**
* A list of items that represent the term and the description
*/
items: {
type: Array,
default: () => [],
validator: (items) => description_list_validators.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) => stack_constants.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__ */ _pluginVue2_normalizer.default(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns
);
const description_list = __component__.exports;
exports.default = description_list;
//# sourceMappingURL=description_list.vue.cjs.map