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