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

Dialpad's Dialtone design system monorepo

import { DT_DESCRIPTION_LIST_DIRECTION as c } from "./description-list-constants.js";
import { itemsValidator as p } from "./description-list-validators.js";
import { createElementBlock as s, openBlock as i, normalizeClass as a, Fragment as d, renderList as m, createElementVNode as l, toDisplayString as n } from "vue";
import { _ as u } from "../../_plugin-vue_export-helper-CHgC5LLL.js";
import { DT_STACK_GAP as _ } from "../stack/stack-constants.js";
const C = {
  compatConfig: { MODE: 3 },
  name: "DtDescriptionList",
  props: {
    /**
     * The direction for the list
     * @values row, column
     */
    direction: {
      type: String,
      default: "row",
      validator: (t) => c.includes(t)
    },
    /**
     * A list of items that represent the term and the description
     */
    items: {
      type: Array,
      default: () => [],
      validator: (t) => p(t),
      required: !0
    },
    /**
     * Set the space between the elements
     * @values 0, 100, 200, 300, 400, 500, 600
     */
    gap: {
      type: String,
      default: "400",
      validator: (t) => _.includes(t)
    },
    /**
     * 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 f(t, g, o, y, D, e) {
  return i(), s("dl", {
    class: a(["d-description-list", e.getDirectionClass, e.getGapClass])
  }, [
    (i(!0), s(d, null, m(o.items, (r) => (i(), s(d, {
      key: r.term
    }, [
      l("dt", {
        class: a(e.dtClass)
      }, n(r.term), 3),
      l("dd", {
        class: a(e.ddClass)
      }, n(r.description), 3)
    ], 64))), 128))
  ], 2);
}
const I = /* @__PURE__ */ u(C, [["render", f]]);
export {
  I as default
};
//# sourceMappingURL=description-list.js.map