@dialpad/dialtone-vue/dist/lib/description-list/description-list.js

Vue component library for Dialpad's design system Dialtone

import { DT_DESCRIPTION_LIST_DIRECTION as i } from "./description-list-constants.js";
import { itemsValidator as a } from "./description-list-validators.js";
import { n as d } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import { DT_STACK_GAP as n } from "../stack/stack-constants.js";
const o = {
  name: "DtDescriptionList",
  props: {
    /**
     * The direction for the list
     * @values row, column
     */
    direction: {
      type: String,
      default: "row",
      validator: (r) => i.includes(r)
    },
    /**
     * A list of items that represent the term and the description
     */
    items: {
      type: Array,
      default: () => [],
      validator: (r) => a(r),
      required: !0
    },
    /**
     * Set the space between the elements
     * @values 0, 100, 200, 300, 400, 500, 600
     */
    gap: {
      type: String,
      default: "400",
      validator: (r) => n.includes(r)
    },
    /**
     * 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 l = function() {
  var t = this, e = t._self._c;
  return e("dl", { class: ["d-description-list", t.getDirectionClass, t.getGapClass] }, [t._l(t.items, function(s) {
    return [e("dt", { key: `dt-${s.term}`, class: t.dtClass }, [t._v(" " + t._s(s.term) + " ")]), e("dd", { key: `dd-${s.term}`, class: t.ddClass }, [t._v(" " + t._s(s.description) + " ")])];
  })], 2);
}, c = [], p = /* @__PURE__ */ d(
  o,
  l,
  c
);
const C = p.exports;
export {
  C as default
};
//# sourceMappingURL=description-list.js.map