@dialpad/dialtone
Version:
Dialpad's Dialtone design system monorepo
90 lines (89 loc) • 2.92 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 vue = require("vue");
const _pluginVue_exportHelper = require("../../_virtual/_plugin-vue_export-helper.cjs");
const _sfc_main = {
compatConfig: { MODE: 3 },
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}`;
}
}
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return vue.openBlock(), vue.createElementBlock("dl", {
class: vue.normalizeClass(["d-description-list", $options.getDirectionClass, $options.getGapClass])
}, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList($props.items, (item) => {
return vue.openBlock(), vue.createElementBlock(vue.Fragment, {
key: item.term
}, [
vue.createElementVNode("dt", {
class: vue.normalizeClass($options.dtClass)
}, vue.toDisplayString(item.term), 3),
vue.createElementVNode("dd", {
class: vue.normalizeClass($options.ddClass)
}, vue.toDisplayString(item.description), 3)
], 64);
}), 128))
], 2);
}
const description_list = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["render", _sfc_render]]);
exports.default = description_list;
//# sourceMappingURL=description_list.vue.cjs.map