@dialpad/dialtone/dist/vue3/lib/collapsible/collapsible.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"collapsible.cjs","sources":["../../../components/collapsible/collapsible.vue"],"sourcesContent":["<template>\n  <component\n    :is=\"elementType\"\n    ref=\"collapsible\"\n    v-on=\"collapsibleListeners\"\n  >\n    <!-- Element for capturing keypress events -->\n    <div\n      :id=\"!ariaLabelledBy && labelledBy\"\n      ref=\"anchor\"\n      :class=\"anchorClass\"\n    >\n      <!-- @slot Slot for the anchor element that toggles the collapsible content -->\n      <slot\n        name=\"anchor\"\n        :attrs=\"{\n          'aria-controls': id,\n          'aria-expanded': isOpen.toString(),\n          'role': 'button',\n        }\"\n      >\n        <dt-button\n          importance=\"clear\"\n          kind=\"muted\"\n          :aria-controls=\"id\"\n          :aria-expanded=\"`${isOpen}`\"\n          :style=\"{\n            'width': maxWidth,\n          }\"\n          @click=\"defaultToggleOpen\"\n        >\n          <dt-icon-chevron-down\n            v-if=\"isOpen\"\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <dt-icon-chevron-right\n            v-else\n            class=\"d-collapsible__icon\"\n            size=\"300\"\n          />\n          <span\n            class=\"d-collapsible__anchor-text\"\n            :title=\"anchorText\"\n          >\n            {{ anchorText }}\n          </span>\n        </dt-button>\n      </slot>\n    </div>\n    <dt-collapsible-lazy-show\n      :id=\"id\"\n      ref=\"contentWrapper\"\n      :aria-hidden=\"`${!isOpen}`\"\n      :aria-labelledby=\"labelledBy\"\n      :aria-label=\"ariaLabel\"\n      :show=\"isOpen\"\n      :element-type=\"contentElementType\"\n      :class=\"contentClass\"\n      :style=\"{\n        'max-height': maxHeight,\n        'max-width': maxWidth,\n      }\"\n      data-qa=\"dt-collapsible--content\"\n      tabindex=\"-1\"\n      appear\n      v-on=\"collapsibleListeners\"\n      @after-leave=\"onLeaveTransitionComplete\"\n      @after-enter=\"onEnterTransitionComplete\"\n    >\n      <!-- @slot Slot for the collapsible element that is expanded by the anchor -->\n      <slot\n        name=\"content\"\n      />\n    </dt-collapsible-lazy-show>\n  </component>\n</template>\n\n<script>\nimport { extractVueListeners, getUniqueString, hasSlotContent } from '@/common/utils';\nimport DtCollapsibleLazyShow from './collapsible_lazy_show.vue';\nimport { DtButton } from '@/components/button';\nimport { DtLazyShow } from '@/components/lazy_show';\nimport { DtIconChevronDown, DtIconChevronRight } from '@dialpad/dialtone-icons/vue3';\n\n/**\n * A collapsible is a component consisting of an interactive anchor that toggled the expandable/collapsible element.\n * @see https://dialtone.dialpad.com/components/collapsible.html\n */\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtCollapsible',\n\n  components: {\n    DtButton,\n    DtCollapsibleLazyShow,\n    DtLazyShow,\n    DtIconChevronDown,\n    DtIconChevronRight,\n  },\n\n  props: {\n    /**\n     * Text that is displayed on the anchor if nothing is passed in the slot.\n     * Ignored if the anchor slot is used.\n     */\n    anchorText: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Controls whether the collapsible is shown. Leaving this null will have the collapsible start\n     * expanded and trigger on click by default. If you set this value, the default trigger\n     * behavior will be disabled, and you can control it as you need.\n     * Supports .sync modifier\n     * @values null, true, false\n     */\n    open: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * The id of the content wrapper.\n     */\n    id: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * HTML element type (tag name) of the root element of the component.\n     */\n    elementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * HTML element type (tag name) of the content wrapper element.\n     */\n    contentElementType: {\n      type: String,\n      default: 'div',\n    },\n\n    /**\n     * Additional class name for the anchor wrapper element.\n     */\n    anchorClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * Additional class name for the content wrapper element.\n     */\n    contentClass: {\n      type: [String, Array, Object],\n      default: null,\n    },\n\n    /**\n     * The maximum width of the anchor and collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * The maximum height of the collapsible element.\n     * Possible units rem|px|%|em\n     */\n    maxHeight: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Label on the collapsible content. Should provide this or ariaLabelledBy but not both.\n     */\n    ariaLabel: {\n      type: String,\n      default: null,\n    },\n\n    /**\n     * Id of the element that labels the collapsible content. Defaults to the anchor element.\n     * Should provide this or ariaLabel but not both.\n     */\n    ariaLabelledBy: {\n      type: String,\n      default: null,\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired to sync the open prop with the parent component\n     * @event update:open\n     */\n    'update:open',\n\n    /**\n     * Event fired when the content is shown or hidden\n     *\n     * @event opened\n     * @type {Boolean}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      isOpen: true,\n    };\n  },\n\n  computed: {\n    labelledBy () {\n      // aria-labelledby should be set only if aria-labelledby is passed as a prop, or if\n      // there is no aria-label and the labelledby should point to the anchor\n      return this.ariaLabelledBy || (!this.ariaLabel && getUniqueString('DtCollapsible__anchor'));\n    },\n\n    collapsibleListeners () {\n      return extractVueListeners(this.$attrs);\n    },\n  },\n\n  watch: {\n    open: {\n      handler: function (open) {\n        if (open !== null) {\n          this.isOpen = open;\n        }\n      },\n\n      immediate: true,\n    },\n  },\n\n  created () {\n    this.validateProperAnchor();\n  },\n\n  methods: {\n    onLeaveTransitionComplete () {\n      this.$emit('opened', false);\n      if (this.open !== null) {\n        this.$emit('update:open', false);\n      }\n    },\n\n    onEnterTransitionComplete () {\n      this.$emit('opened', true, this.$refs.content);\n      if (this.open !== null) {\n        this.$emit('update:open', true);\n      }\n    },\n\n    defaultToggleOpen () {\n      if (this.open === null) {\n        this.toggleOpen();\n      }\n    },\n\n    toggleOpen () {\n      this.isOpen = !this.isOpen;\n    },\n\n    validateProperAnchor () {\n      if (!this.anchorText && !hasSlotContent(this.$slots.anchor)) {\n        console.error('anchor text and anchor slot content cannot both be falsy');\n      }\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtButton","DtCollapsibleLazyShow","DtLazyShow","DtIconChevronDown","DtIconChevronRight","getUniqueString","extractVueListeners","open","hasSlotContent","_hoisted_1","_hoisted_2","_openBlock","_createBlock","_resolveDynamicComponent","$props","_mergeProps","_toHandlers","$options","_withCtx","_createElementVNode","_normalizeClass","_renderSlot","_ctx","$data","_createVNode","_component_dt_button","_normalizeStyle","_component_dt_icon_chevron_down","_component_dt_icon_chevron_right","_toDisplayString","_component_dt_collapsible_lazy_show"],"mappings":"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"}