@dialpad/dialtone/dist/vue3/lib/combobox-with-popover/combobox-with-popover.cjs.map

Dialpad's Dialtone design system monorepo

{"version":3,"file":"combobox-with-popover.cjs","sources":["../../../recipes/comboboxes/combobox_with_popover/combobox_with_popover.vue"],"sourcesContent":["<template>\n  <dt-combobox\n    ref=\"combobox\"\n    :loading=\"loading\"\n    :label=\"label\"\n    :label-visible=\"labelVisible\"\n    :size=\"size\"\n    :description=\"description\"\n    :empty-list=\"emptyList\"\n    :empty-state-message=\"emptyStateMessage\"\n    :show-list=\"isListShown\"\n    :on-beginning-of-list=\"onBeginningOfList\"\n    :on-end-of-list=\"onEndOfList\"\n    :list-rendered-outside=\"true\"\n    :list-id=\"listId\"\n    data-qa=\"dt-combobox\"\n    v-bind=\"comboboxListeners\"\n  >\n    <template\n      #input=\"{ inputProps }\"\n    >\n      <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n      <div\n        :id=\"externalAnchor\"\n        ref=\"input\"\n        @focusin=\"onFocusIn\"\n        @keydown.up=\"openOnArrowKeyPress($event)\"\n        @keydown.down=\"openOnArrowKeyPress($event)\"\n      >\n        <slot\n          name=\"input\"\n          :input-props=\"inputProps\"\n          :on-input=\"handleDisplayList\"\n        />\n      </div>\n    </template>\n    <template #list=\"{ opened, listProps, clearHighlightIndex }\">\n      <dt-popover\n        ref=\"popover\"\n        v-model:open=\"isListShown\"\n        :hide-on-click=\"false\"\n        :max-height=\"maxHeight\"\n        :max-width=\"maxWidth\"\n        :offset=\"popoverOffset\"\n        :sticky=\"popoverSticky\"\n        placement=\"bottom-start\"\n        initial-focus-element=\"none\"\n        padding=\"none\"\n        role=\"listbox\"\n        :external-anchor=\"externalAnchor\"\n        :content-width=\"contentWidth\"\n        :content-appear=\"true\"\n        :content-tabindex=\"null\"\n        :modal=\"false\"\n        :auto-focus=\"false\"\n        :append-to=\"appendTo\"\n        :transition=\"transition\"\n        @opened=\"opened\"\n      >\n        <template\n          v-if=\"hasSlotContent($slots.header)\"\n          #headerContent\n        >\n          <div\n            ref=\"header\"\n          >\n            <slot name=\"header\" />\n          </div>\n        </template>\n\n        <template #content>\n          <!-- eslint-disable-next-line vuejs-accessibility/no-static-element-interactions -->\n          <div\n            ref=\"listWrapper\"\n            :class=\"[\n              'd-recipe-combobox-with-popover__list',\n              DROPDOWN_PADDING_CLASSES[padding],\n              listClass,\n            ]\"\n            @mouseleave=\"clearHighlightIndex\"\n            @focusout=\"clearHighlightIndex\"\n          >\n            <combobox-loading-list\n              v-if=\"loading\"\n              v-bind=\"listProps\"\n            />\n            <combobox-empty-list\n              v-else-if=\"emptyList && emptyStateMessage\"\n              v-bind=\"listProps\"\n              :message=\"emptyStateMessage\"\n            />\n            <slot\n              v-else\n              name=\"list\"\n              :list-props=\"listProps\"\n            />\n          </div>\n        </template>\n\n        <template\n          v-if=\"hasSlotContent($slots.footer)\"\n          #footerContent\n        >\n          <div\n            ref=\"footer\"\n          >\n            <slot name=\"footer\" />\n          </div>\n        </template>\n      </dt-popover>\n    </template>\n  </dt-combobox>\n</template>\n\n<script>\nimport ComboboxLoadingList from '@/components/combobox/combobox_loading-list.vue';\nimport ComboboxEmptyList from '@/components/combobox/combobox_empty-list.vue';\nimport { DtCombobox, COMBOBOX_LABEL_SIZES } from '@/components/combobox';\nimport { DtPopover, POPOVER_APPEND_TO_VALUES, POPOVER_CONTENT_WIDTHS } from '@/components/popover';\nimport { getUniqueString, hasSlotContent } from '@/common/utils';\nimport { DROPDOWN_PADDING_CLASSES } from '@/components/dropdown';\n\nexport default {\n  compatConfig: { MODE: 3 },\n  name: 'DtRecipeComboboxWithPopover',\n\n  components: {\n    DtCombobox,\n    DtPopover,\n    ComboboxLoadingList,\n    ComboboxEmptyList,\n  },\n\n  props: {\n    /**\n     * String to use for the input label.\n     */\n    label: {\n      type: String,\n      required: true,\n    },\n\n    /**\n     * Determines visibility of input label.\n     * @values true, false\n     */\n    labelVisible: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Size of the input, one of `xs`, `sm`, `md`, `lg`, `xl`\n     * @values null, xs, sm, md, lg, xl\n     */\n    size: {\n      type: String,\n      default: null,\n      validator: (t) => Object.values(COMBOBOX_LABEL_SIZES).includes(t),\n    },\n\n    /**\n     * Description for the input\n     */\n    description: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines when to show the list element and also controls the aria-expanded attribute.\n     * Leaving this null will have the combobox trigger on input focus by default.\n     * If you set this value, the default trigger behavior will be disabled and you can\n     * control it as you need.\n     */\n    showList: {\n      type: Boolean,\n      default: null,\n    },\n\n    /**\n     * Sets an ID on the list element of the component. Used by several aria attributes\n     * as well as when deriving the IDs for each item.\n     */\n    listId: {\n      type: String,\n      default () { return getUniqueString(); },\n    },\n\n    /**\n     * Additional class for the wrapper list element.\n     */\n    listClass: {\n      type: [String, Array, Object],\n      default: '',\n    },\n\n    /**\n     * A method that will be called when the selection goes past the beginning of the list.\n     */\n    onBeginningOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * A method that will be called when the selection goes past the end of the list.\n     */\n    onEndOfList: {\n      type: Function,\n      default: null,\n    },\n\n    /**\n     * Determines maximum height for the popover before overflow.\n     * Possible units rem|px|em\n     */\n    maxHeight: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Determines maximum width for the popover before overflow.\n     * Possible units rem|px|%|em\n     */\n    maxWidth: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Vertical padding size around the list element.\n     */\n    padding: {\n      type: String,\n      default: 'small',\n      validator: (padding) => {\n        return Object.keys(DROPDOWN_PADDING_CLASSES).some((item) => item === padding);\n      },\n    },\n\n    /**\n     * Width configuration for the popover content. When its value is 'anchor',\n     * the popover content will have the same width as the anchor.\n     */\n    contentWidth: {\n      type: String,\n      default: null,\n      validator: contentWidth => POPOVER_CONTENT_WIDTHS.includes(contentWidth),\n    },\n\n    /**\n     * If the list should be shown by pressing up or down arrow key on the input element.\n     * This can be set when not passing showList prop.\n     */\n    openWithArrowKeys: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     *  Displaces the popover content box from its anchor element\n     *  by the specified number of pixels.\n     */\n    popoverOffset: {\n      type: Array,\n      default: () => [0, 4],\n    },\n\n    /**\n     * If the popover sticks to the input.\n     */\n    popoverSticky: {\n      type: [Boolean, String],\n      default: false,\n    },\n\n    /**\n     * Displays the list when the combobox is focused, before the user has typed anything.\n     * When this is enabled the list will not close after selection.\n     */\n    hasSuggestionList: {\n      type: Boolean,\n      default: true,\n    },\n\n    /**\n     * Determines when to show the skeletons and also controls aria-busy attribute.\n     */\n    loading: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Sets the list to an empty state, and displays the message from prop `emptyStateMessage`.\n     */\n    emptyList: {\n      type: Boolean,\n      default: false,\n    },\n\n    /**\n     * Message to show when the list is empty\n     */\n    emptyStateMessage: {\n      type: String,\n      default: '',\n    },\n\n    /**\n     * Sets the element to which the popover is going to append to.\n     * 'body' will append to the nearest body (supports shadow DOM).\n     * @values 'body', 'parent', HTMLElement,\n     */\n    appendTo: {\n      type: [HTMLElement, String],\n      default: 'body',\n      validator: appendTo => {\n        return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||\n            (appendTo instanceof HTMLElement);\n      },\n    },\n\n    /**\n     * Named transition when the content display is toggled.\n     * @see DtLazyShow\n     */\n    transition: {\n      type: String,\n      default: 'fade',\n    },\n  },\n\n  emits: [\n    /**\n     * Event fired when item selected\n     *\n     * @event select\n     * @type {Number}\n     */\n    'select',\n\n    /**\n     * Event fired when 'escape' key is pressed\n     *\n     * @event escape\n     */\n    'escape',\n\n    /**\n     * Event fired when an item is highlighted\n     *\n     * @event highlight\n     * @type {Number}\n     */\n    'highlight',\n\n    /**\n     * Emitted when items are shown or hidden\n     *\n     * @event opened\n     * @type {Boolean | Array}\n     */\n    'opened',\n  ],\n\n  data () {\n    return {\n      DROPDOWN_PADDING_CLASSES,\n      isListShown: false,\n      isInputFocused: false,\n      isListFocused: false,\n      externalAnchor: getUniqueString(),\n      hasSlotContent,\n    };\n  },\n\n  computed: {\n    comboboxListeners () {\n      return {\n        ...this.$attrs,\n\n        onSelect: this.onSelect,\n\n        onEscape: this.onEscape,\n\n        onHighlight: this.onHighlight,\n      };\n    },\n  },\n\n  watch: {\n    showList: {\n      handler: function (show) {\n        if (show !== null) {\n          this.isListShown = show;\n        }\n      },\n\n      immediate: true,\n    },\n\n    isListShown (val) {\n      if (val) {\n        window.addEventListener('mousedown', this.onFocusOut);\n      } else {\n        window.removeEventListener('mousedown', this.onFocusOut);\n      }\n      this.onOpened(val);\n    },\n  },\n\n  methods: {\n    handleDisplayList (value) {\n      if (!this.hasSuggestionList && value) { this.showComboboxList(); }\n      if (!this.hasSuggestionList && !value) { this.closeComboboxList(); }\n    },\n\n    showComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = true;\n    },\n\n    closeComboboxList () {\n      if (this.showList != null) { return; }\n      this.isListShown = false;\n    },\n\n    onSelect (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('select', highlightIndex);\n      if (!this.hasSuggestionList) {\n        // we don't display the list before the user has typed anything\n        this.closeComboboxList();\n      }\n    },\n\n    onEscape () {\n      this.$emit('escape');\n      this.closeComboboxList();\n    },\n\n    onHighlight (highlightIndex) {\n      if (this.loading) return;\n\n      this.$emit('highlight', highlightIndex);\n    },\n\n    onOpened (opened) {\n      this.$emit('opened', opened);\n    },\n\n    onFocusIn (e) {\n      if (this.hasSuggestionList && e && this.$refs.input?.querySelector('input') === e.target) {\n        // only trigger if we show suggestion list when focused, and\n        // it's the input specifically that was focused\n        this.showComboboxList();\n      }\n    },\n\n    onFocusOut (e) {\n      // Check if the focus change was to another target within the combobox component\n      const popoverEl = this.$refs.popover?.tip?.popper;\n      const comboboxEl = this.$refs.input;\n\n      if (e.composedPath()?.some(el => [popoverEl, comboboxEl].includes(el))) return;\n\n      // If outside the combobox then close\n      this.closeComboboxList();\n    },\n\n    openOnArrowKeyPress () {\n      if (this.showList !== null || this.isListShown || !this.openWithArrowKeys) { return; }\n\n      this.showComboboxList();\n    },\n  },\n};\n</script>\n"],"names":["_sfc_main","DtCombobox","DtPopover","ComboboxLoadingList","ComboboxEmptyList","t","COMBOBOX_LABEL_SIZES","getUniqueString","padding","DROPDOWN_PADDING_CLASSES","item","contentWidth","POPOVER_CONTENT_WIDTHS","appendTo","POPOVER_APPEND_TO_VALUES","hasSlotContent","show","val","value","highlightIndex","opened","_a","popoverEl","_b","comboboxEl","_c","el","_hoisted_1","_hoisted_2","_hoisted_3","_hoisted_4","_openBlock","_createBlock","_component_dt_combobox","_mergeProps","$props","$data","$options","_withCtx","inputProps","_createElementVNode","args","_withKeys","$event","_renderSlot","_ctx","listProps","clearHighlightIndex","_createVNode","_component_dt_popover","_cache","_createSlots","_normalizeClass","_component_combobox_loading_list","_normalizeProps","_component_combobox_empty_list"],"mappings":"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"}