primevue/commandmenu/index.mjs

PrimeVue is a premium UI library for Vue featuring a rich set of 90+ components, a theme designer, various theme alternatives such as Material, Bootstrap, Tailwind, premium templates and professional support. In addition, it integrates with PrimeBlock, wh

import { findSingle } from '@primeuix/utils/dom';
import Menu from 'primevue/menu';
import { mergeProps, resolveComponent, openBlock, createBlock, resolveDynamicComponent, withCtx, createElementVNode, renderSlot, createElementBlock, createTextVNode, toDisplayString, createCommentVNode, createVNode, normalizeStyle, normalizeClass, createSlots, normalizeProps, guardReactiveProps } from 'vue';
import BaseComponent from '@primevue/core/basecomponent';
import CommandMenuStyle from 'primevue/commandmenu/style';

var script$1 = {
  name: 'BaseCommandMenu',
  "extends": BaseComponent,
  props: {
    model: {
      type: Array,
      "default": null
    },
    search: {
      type: String,
      "default": null
    },
    filter: {
      type: Function,
      "default": null
    },
    placeholder: {
      type: String,
      "default": null
    },
    emptyMessage: {
      type: String,
      "default": null
    },
    emptyFilterMessage: {
      type: String,
      "default": null
    },
    menuClass: {
      type: [String, Object, Array],
      "default": null
    },
    menuStyle: {
      type: [String, Object, Array],
      "default": null
    },
    ariaLabel: {
      type: String,
      "default": null
    },
    ariaLabelledby: {
      type: String,
      "default": null
    },
    as: {
      type: [String, Object],
      "default": 'DIV'
    },
    asChild: {
      type: Boolean,
      "default": false
    }
  },
  style: CommandMenuStyle,
  provide: function provide() {
    return {
      $pcCommandMenu: this,
      $parentInstance: this
    };
  }
};

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: true } : { done: false, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = true, u = false; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = true, o = r; }, f: function f() { try { a || null == t["return"] || t["return"](); } finally { if (u) throw o; } } }; }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), true).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: true, configurable: true, writable: true }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
var script = {
  name: 'CommandMenu',
  "extends": script$1,
  inheritAttrs: false,
  emits: ['update:search', 'select'],
  data: function data() {
    var _this$search;
    return {
      d_search: (_this$search = this.search) !== null && _this$search !== void 0 ? _this$search : '',
      focusedOptionId: null
    };
  },
  watch: {
    search: function search(newValue) {
      var normalizedSearch = newValue !== null && newValue !== void 0 ? newValue : '';
      if (this.d_search !== normalizedSearch) {
        this.d_search = normalizedSearch;
        this.resetFocusedOption();
      }
    }
  },
  mounted: function mounted() {
    if (this.$refs.menu) {
      this.focusFirstOption();
    }
  },
  methods: {
    onInputChange: function onInputChange(event) {
      this.updateSearch(event.target.value);
    },
    updateSearch: function updateSearch(value) {
      var normalizedSearch = value !== null && value !== void 0 ? value : '';
      this.d_search = normalizedSearch;
      this.$emit('update:search', normalizedSearch);
      this.resetFocusedOption();
    },
    resetFocusedOption: function resetFocusedOption() {
      var _this = this;
      this.$nextTick(function () {
        _this.focusFirstOption();
      });
    },
    focusFirstOption: function focusFirstOption() {
      var _menu$focusedOptionId;
      var menu = this.$refs.menu;
      if (!menu) {
        this.focusedOptionId = null;
        return;
      }
      menu.focused = true;
      if (!menu.focusedOptionId) {
        menu.changeFocusedOptionIndex(0);
      }
      this.focusedOptionId = (_menu$focusedOptionId = menu.focusedOptionId) !== null && _menu$focusedOptionId !== void 0 ? _menu$focusedOptionId : null;
    },
    onInputKeyDown: function onInputKeyDown(event) {
      var _menu$focusedOptionId2;
      var menu = this.$refs.menu;
      menu.onListKeyDown(event);
      this.focusedOptionId = (_menu$focusedOptionId2 = menu === null || menu === void 0 ? void 0 : menu.focusedOptionId) !== null && _menu$focusedOptionId2 !== void 0 ? _menu$focusedOptionId2 : null;
      if (this.focusedOptionId) {
        this.scrollFocusedOptionInView();
      }
    },
    scrollFocusedOptionInView: function scrollFocusedOptionInView() {
      var _this2 = this;
      requestAnimationFrame(function () {
        var _findSingle, _findSingle$scrollInt;
        var menu = _this2.$refs.menu;
        if (!menu || !_this2.focusedOptionId) return;
        (_findSingle = findSingle(menu.list, "[id=\"".concat(_this2.focusedOptionId, "\"]"))) === null || _findSingle === void 0 || (_findSingle$scrollInt = _findSingle.scrollIntoView) === null || _findSingle$scrollInt === void 0 || _findSingle$scrollInt.call(_findSingle, {
          block: 'nearest',
          inline: 'nearest'
        });
      });
    },
    wrapCommand: function wrapCommand(item) {
      var _this3 = this;
      return _objectSpread(_objectSpread({}, item), {}, {
        command: function command(ev) {
          var _item$command;
          (_item$command = item.command) === null || _item$command === void 0 || _item$command.call(item, ev);
          _this3.$emit('select', {
            originalEvent: ev.originalEvent,
            item: item
          });
        }
      });
    },
    wrapCommands: function wrapCommands(items) {
      var _this4 = this;
      return items.map(function (item) {
        return item.items ? _objectSpread(_objectSpread({}, item), {}, {
          items: _this4.wrapCommands(item.items)
        }) : _this4.wrapCommand(item);
      });
    },
    filterModel: function filterModel(items) {
      var out = [];
      var _iterator = _createForOfIteratorHelper(items),
        _step;
      try {
        for (_iterator.s(); !(_step = _iterator.n()).done;) {
          var item = _step.value;
          if (item.items) {
            var children = this.filterModel(item.items);
            if (children.length) out.push(_objectSpread(_objectSpread({}, item), {}, {
              items: children
            }));
          } else if (item.separator) {
            continue;
          } else {
            var score = this.scoreItem(item, this.d_search);
            if (score > 0) out.push({
              wrapped: this.wrapCommand(item),
              score: score
            });
          }
        }
      } catch (err) {
        _iterator.e(err);
      } finally {
        _iterator.f();
      }
      out.sort(function (a, b) {
        var _b$score, _a$score;
        return ((_b$score = b.score) !== null && _b$score !== void 0 ? _b$score : 0) - ((_a$score = a.score) !== null && _a$score !== void 0 ? _a$score : 0);
      });
      return out.map(function (e) {
        var _e$wrapped;
        return (_e$wrapped = e.wrapped) !== null && _e$wrapped !== void 0 ? _e$wrapped : e;
      });
    },
    scoreItem: function scoreItem(item, search) {
      var _this$filter;
      var scorer = (_this$filter = this.filter) !== null && _this$filter !== void 0 ? _this$filter : this.defaultScorer;
      return scorer(item, search) || 0;
    },
    defaultScorer: function defaultScorer(item, search) {
      if (!search) return 1;
      var s = String(search).toLowerCase();
      var label = String(this.resolveItemLabel(item)).toLowerCase();
      if (label.includes(s)) return 1;
      var kws = Array.isArray(item.keywords) ? item.keywords : item.keywords ? [item.keywords] : [];
      var _iterator2 = _createForOfIteratorHelper(kws),
        _step2;
      try {
        for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
          var kw = _step2.value;
          if (String(kw !== null && kw !== void 0 ? kw : '').toLowerCase().includes(s)) return 1;
        }
      } catch (err) {
        _iterator2.e(err);
      } finally {
        _iterator2.f();
      }
      return 0;
    },
    resolveItemLabel: function resolveItemLabel(item) {
      var _item$label;
      return typeof item.label === 'function' ? item.label() : (_item$label = item.label) !== null && _item$label !== void 0 ? _item$label : '';
    }
  },
  computed: {
    menuId: function menuId() {
      return "".concat(this.$id, "_menu");
    },
    listId: function listId() {
      return "".concat(this.menuId, "_list");
    },
    inputAttrs: function inputAttrs() {
      return mergeProps({
        role: 'combobox',
        'aria-autocomplete': 'list',
        'aria-expanded': true,
        'aria-controls': this.filteredModel.length ? this.listId : undefined,
        'aria-activedescendant': this.focusedOptionId,
        autocomplete: 'off',
        placeholder: this.placeholder,
        onKeydown: this.onInputKeyDown
      }, this.ptm('input'));
    },
    inputProps: function inputProps() {
      return _objectSpread(_objectSpread({}, this.inputAttrs), {}, {
        value: this.d_search,
        onInput: this.onInputChange
      });
    },
    isFiltering: function isFiltering() {
      return !!(this.d_search && this.d_search.length);
    },
    emptyMessageText: function emptyMessageText() {
      var _ref, _this$emptyMessage, _this$$primevue;
      return (_ref = (_this$emptyMessage = this.emptyMessage) !== null && _this$emptyMessage !== void 0 ? _this$emptyMessage : (_this$$primevue = this.$primevue) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.config) === null || _this$$primevue === void 0 || (_this$$primevue = _this$$primevue.locale) === null || _this$$primevue === void 0 ? void 0 : _this$$primevue.emptyMessage) !== null && _ref !== void 0 ? _ref : '';
    },
    emptyFilterMessageText: function emptyFilterMessageText() {
      var _ref2, _ref3, _this$emptyFilterMess, _this$$primevue2, _this$$primevue3;
      return (_ref2 = (_ref3 = (_this$emptyFilterMess = this.emptyFilterMessage) !== null && _this$emptyFilterMess !== void 0 ? _this$emptyFilterMess : (_this$$primevue2 = this.$primevue) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.config) === null || _this$$primevue2 === void 0 || (_this$$primevue2 = _this$$primevue2.locale) === null || _this$$primevue2 === void 0 ? void 0 : _this$$primevue2.emptySearchMessage) !== null && _ref3 !== void 0 ? _ref3 : (_this$$primevue3 = this.$primevue) === null || _this$$primevue3 === void 0 || (_this$$primevue3 = _this$$primevue3.config) === null || _this$$primevue3 === void 0 || (_this$$primevue3 = _this$$primevue3.locale) === null || _this$$primevue3 === void 0 ? void 0 : _this$$primevue3.emptyFilterMessage) !== null && _ref2 !== void 0 ? _ref2 : '';
    },
    filteredModel: function filteredModel() {
      var _this$model;
      var source = (_this$model = this.model) !== null && _this$model !== void 0 ? _this$model : [];
      return this.d_search ? this.filterModel(source) : this.wrapCommands(source);
    }
  },
  components: {
    Menu: Menu
  }
};

var _hoisted_1 = ["value"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
  var _component_Menu = resolveComponent("Menu");
  return !_ctx.asChild ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.as), mergeProps({
    key: 0,
    "class": _ctx.cx('root')
  }, _ctx.ptmi('root')), {
    "default": withCtx(function () {
      return [createElementVNode("div", mergeProps({
        "class": _ctx.cx('header')
      }, _ctx.ptm('header')), [renderSlot(_ctx.$slots, "header", {
        value: $data.d_search,
        inputProps: $options.inputProps
      }, function () {
        return [createElementVNode("input", mergeProps({
          ref: "input",
          type: "text",
          role: "combobox",
          value: $data.d_search,
          "class": _ctx.cx('input')
        }, $options.inputAttrs, {
          onInput: _cache[0] || (_cache[0] = function () {
            return $options.onInputChange && $options.onInputChange.apply($options, arguments);
          })
        }), null, 16, _hoisted_1)];
      })], 16), $options.filteredModel.length === 0 ? (openBlock(), createElementBlock("div", mergeProps({
        key: 0,
        "class": _ctx.cx('emptyMessage')
      }, _ctx.ptm('emptyMessage')), [$options.isFiltering ? renderSlot(_ctx.$slots, "emptyfilter", {
        key: 0
      }, function () {
        return [createTextVNode(toDisplayString($options.emptyFilterMessageText), 1)];
      }) : renderSlot(_ctx.$slots, "empty", {
        key: 1
      }, function () {
        return [createTextVNode(toDisplayString($options.emptyMessageText), 1)];
      })], 16)) : createCommentVNode("", true), createVNode(_component_Menu, {
        id: $options.menuId,
        ref: "menu",
        model: $options.filteredModel,
        popup: false,
        "aria-label": _ctx.ariaLabel,
        "aria-labelledby": _ctx.ariaLabelledby,
        "class": normalizeClass([_ctx.cx('list'), _ctx.menuClass]),
        style: normalizeStyle(_ctx.menuStyle),
        pt: _ctx.ptm('pcMenu'),
        unstyled: _ctx.unstyled
      }, createSlots({
        _: 2
      }, [_ctx.$slots.item ? {
        name: "item",
        fn: withCtx(function (slotProps) {
          return [renderSlot(_ctx.$slots, "item", normalizeProps(guardReactiveProps(slotProps)))];
        }),
        key: "0"
      } : undefined, _ctx.$slots.submenulabel ? {
        name: "submenulabel",
        fn: withCtx(function (slotProps) {
          return [renderSlot(_ctx.$slots, "submenulabel", normalizeProps(guardReactiveProps(slotProps)))];
        }),
        key: "1"
      } : undefined]), 1032, ["id", "model", "aria-label", "aria-labelledby", "class", "style", "pt", "unstyled"]), _ctx.$slots.footer ? (openBlock(), createElementBlock("div", mergeProps({
        key: 1,
        "class": _ctx.cx('footer')
      }, _ctx.ptm('footer')), [renderSlot(_ctx.$slots, "footer", {
        items: $options.filteredModel
      })], 16)) : createCommentVNode("", true)];
    }),
    _: 3
  }, 16, ["class"])) : renderSlot(_ctx.$slots, "default", {
    key: 1,
    "class": normalizeClass(_ctx.cx('root'))
  });
}

script.render = render;

export { script as default };