@fmdevui/fm-dev/lib/packages/core/layout/navBars/topBar/search.vue2.js

Page level components developed based on Element Plus.

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var vue = require('vue');
var vueRouter = require('vue-router');
var vueI18n = require('vue-i18n');
var pinia = require('pinia');
require('../../../stores/index.js');
var tagsViewRoutes = require('../../../stores/tagsViewRoutes.js');

const _hoisted_1 = { class: "layout-search-dialog" };
var _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "search",
  setup(__props, { expose: __expose }) {
    const storesTagsViewRoutes = tagsViewRoutes.useTagsViewRoutes();
    const { tagsViewRoutes: tagsViewRoutes$1 } = pinia.storeToRefs(storesTagsViewRoutes);
    const layoutMenuAutocompleteRef = vue.ref();
    const { t } = vueI18n.useI18n();
    const router = vueRouter.useRouter();
    const state = vue.reactive({
      isShowSearch: false,
      menuQuery: "",
      tagsViewList: []
    });
    const openSearch = () => {
      state.menuQuery = "";
      state.isShowSearch = true;
      initTageView();
      vue.nextTick(() => {
        setTimeout(() => {
          layoutMenuAutocompleteRef.value.focus();
        });
      });
    };
    const closeSearch = () => {
      state.isShowSearch = false;
    };
    const menuSearch = (queryString, cb) => {
      let results = queryString ? state.tagsViewList.filter(createFilter(queryString)) : state.tagsViewList;
      cb(results);
    };
    const createFilter = (queryString) => {
      return (restaurant) => {
        return restaurant.path.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || restaurant.meta.title.toLowerCase().indexOf(queryString.toLowerCase()) > -1 || t(restaurant.meta.title).indexOf(queryString.toLowerCase()) > -1;
      };
    };
    const initTageView = () => {
      if (state.tagsViewList.length > 0) return false;
      tagsViewRoutes$1.value.map((v) => {
        if (!v.meta?.isHide && v.type !== 1) state.tagsViewList.push({ ...v });
      });
    };
    const onHandleSelect = (item) => {
      let { path, redirect } = item;
      if (item.meta?.isLink && !item.meta?.isIframe) window.open(item.meta?.isLink);
      else if (redirect) router.push(redirect);
      else router.push(path);
      closeSearch();
    };
    __expose({
      openSearch
    });
    return (_ctx, _cache) => {
      const _component_ele_Search = vue.resolveComponent("ele-Search");
      const _component_el_icon = vue.resolveComponent("el-icon");
      const _component_SvgIcon = vue.resolveComponent("SvgIcon");
      const _component_el_autocomplete = vue.resolveComponent("el-autocomplete");
      const _component_el_dialog = vue.resolveComponent("el-dialog");
      return vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
        vue.createVNode(_component_el_dialog, {
          modelValue: state.isShowSearch,
          "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => state.isShowSearch = $event),
          "destroy-on-close": "",
          "show-close": false
        }, {
          footer: vue.withCtx(() => [
            vue.createVNode(_component_el_autocomplete, {
              modelValue: state.menuQuery,
              "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => state.menuQuery = $event),
              "fetch-suggestions": menuSearch,
              placeholder: _ctx.$t("message.user.searchPlaceholder"),
              ref_key: "layoutMenuAutocompleteRef",
              ref: layoutMenuAutocompleteRef,
              onSelect: onHandleSelect,
              "fit-input-width": true
            }, {
              prefix: vue.withCtx(() => [
                vue.createVNode(_component_el_icon, { class: "el-input__icon" }, {
                  default: vue.withCtx(() => [
                    vue.createVNode(_component_ele_Search)
                  ]),
                  _: 1
                  /* STABLE */
                })
              ]),
              default: vue.withCtx(({ item }) => [
                vue.createElementVNode("div", null, [
                  vue.createVNode(_component_SvgIcon, {
                    name: item.meta.icon,
                    class: "mr5"
                  }, null, 8, ["name"]),
                  vue.createTextVNode(
                    " " + vue.toDisplayString(_ctx.$t(item.meta.title)),
                    1
                    /* TEXT */
                  )
                ])
              ]),
              _: 1
              /* STABLE */
            }, 8, ["modelValue", "placeholder"])
          ]),
          _: 1
          /* STABLE */
        }, 8, ["modelValue"])
      ]);
    };
  }
});

exports.default = _sfc_main;