@dialpad/dialtone-vue/dist/lib/collapsible/collapsible.js

Vue component library for Dialpad's design system Dialtone

import { getUniqueString as a } from "../../common/utils/index.js";
import l from "./collapsible-lazy-show.js";
import { DtIconChevronRight as i, DtIconChevronDown as o } from "@dialpad/dialtone-icons/vue2";
import { n as r } from "../../_plugin-vue2_normalizer-DSLOjnn3.js";
import s from "../lazy-show/lazy-show.js";
import p from "../button/button.js";
const d = {
  name: "DtCollapsible",
  components: {
    DtButton: p,
    DtCollapsibleLazyShow: l,
    DtLazyShow: s,
    DtIconChevronDown: o,
    DtIconChevronRight: i
  },
  props: {
    /**
     * Text that is displayed on the anchor if nothing is passed in the slot.
     * Ignored if the anchor slot is used.
     */
    anchorText: {
      type: String,
      default: null
    },
    /**
     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start
     * expanded and trigger on click by default. If you set this value, the default trigger
     * behavior will be disabled, and you can control it as you need.
     * Supports .sync modifier
     * @values null, true, false
     */
    open: {
      type: Boolean,
      default: null
    },
    /**
     * The id of the content wrapper.
     */
    id: {
      type: String,
      default() {
        return a();
      }
    },
    /**
     * HTML element type (tag name) of the root element of the component.
     */
    elementType: {
      type: String,
      default: "div"
    },
    /**
     * HTML element type (tag name) of the content wrapper element.
     */
    contentElementType: {
      type: String,
      default: "div"
    },
    /**
     * Additional class name for the anchor wrapper element.
     */
    anchorClass: {
      type: [String, Array, Object],
      default: null
    },
    /**
     * Additional class name for the content wrapper element.
     */
    contentClass: {
      type: [String, Array, Object],
      default: null
    },
    /**
     * The maximum width of the anchor and collapsible element.
     * Possible units rem|px|%|em
     */
    maxWidth: {
      type: String,
      default: null
    },
    /**
     * The maximum height of the collapsible element.
     * Possible units rem|px|%|em
     */
    maxHeight: {
      type: String,
      default: null
    },
    /**
     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.
     */
    ariaLabel: {
      type: String,
      default: null
    },
    /**
     * Id of the element that labels the collapsible content. Defaults to the anchor element.
     * Should provide this or ariaLabel but not both.
     */
    ariaLabelledBy: {
      type: String,
      default: null
    }
  },
  emits: [
    /**
     * Event fired to sync the open prop with the parent component
     * @event update:open
     */
    "update:open",
    /**
     * Event fired when the content is shown or hidden
     *
     * @event opened
     * @type {Boolean}
     */
    "opened"
  ],
  data() {
    return {
      isOpen: !0
    };
  },
  computed: {
    labelledBy() {
      return this.ariaLabelledBy || !this.ariaLabel && a("DtCollapsible__anchor");
    }
  },
  watch: {
    open: {
      handler: function(n) {
        n !== null && (this.isOpen = n);
      },
      immediate: !0
    }
  },
  mounted() {
    this.validateProperAnchor();
  },
  methods: {
    onLeaveTransitionComplete() {
      this.$emit("opened", !1), this.open !== null && this.$emit("update:open", !1);
    },
    onEnterTransitionComplete() {
      this.$emit("opened", !0, this.$refs.content), this.open !== null && this.$emit("update:open", !0);
    },
    defaultToggleOpen() {
      this.open === null && this.toggleOpen();
    },
    toggleOpen() {
      this.isOpen = !this.isOpen;
    },
    validateProperAnchor() {
      !this.anchorText && !this.$scopedSlots.anchor && console.error("anchor text and anchor slot content cannot both be falsy");
    }
  }
};
var c = function() {
  var e = this, t = e._self._c;
  return t(e.elementType, e._g({ ref: "collapsible", tag: "component" }, e.$listeners), [t("div", { ref: "anchor", class: e.anchorClass, attrs: { id: !e.ariaLabelledBy && e.labelledBy } }, [e._t("anchor", function() {
    return [t("dt-button", { style: {
      width: e.maxWidth
    }, attrs: { importance: "clear", kind: "muted", "aria-controls": e.id, "aria-expanded": `${e.isOpen}` }, on: { click: e.defaultToggleOpen } }, [e.isOpen ? t("dt-icon-chevron-down", { staticClass: "d-collapsible__icon", attrs: { size: "300" } }) : t("dt-icon-chevron-right", { staticClass: "d-collapsible__icon", attrs: { size: "300" } }), t("span", { staticClass: "d-collapsible__anchor-text", attrs: { title: e.anchorText } }, [e._v(" " + e._s(e.anchorText) + " ")])], 1)];
  }, { attrs: {
    "aria-controls": e.id,
    "aria-expanded": e.isOpen.toString(),
    role: "button"
  } })], 2), t("dt-collapsible-lazy-show", e._g({ ref: "contentWrapper", class: e.contentClass, style: {
    "max-height": e.maxHeight,
    "max-width": e.maxWidth
  }, attrs: { id: e.id, "aria-hidden": `${!e.isOpen}`, "aria-labelledby": e.labelledBy, "aria-label": e.ariaLabel, show: e.isOpen, "element-type": e.contentElementType, "data-qa": "dt-collapsible--content", tabindex: "-1", appear: "" }, on: { "after-leave": e.onLeaveTransitionComplete, "after-enter": e.onEnterTransitionComplete } }, e.$listeners), [e._t("content")], 2)], 1);
}, h = [], m = /* @__PURE__ */ r(
  d,
  c,
  h
);
const v = m.exports;
export {
  v as default
};
//# sourceMappingURL=collapsible.js.map