ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-cascader/menu.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"menu.mjs","sources":["../../../../../src/components/ivue-cascader/menu.vue"],"sourcesContent":["<template>\r\n  <span>\r\n    <ul v-if=\"options && options.length\" :class=\"prefixCls\">\r\n      <menu-item\r\n        v-for=\"(item, index) in options\"\r\n        :item=\"item\"\r\n        :tmpItem=\"data.tmpItem\"\r\n        :key=\"index\"\r\n        @click=\"handleClickItem\"\r\n        @mouseenter=\"handleHoverItem\"\r\n      ></menu-item>\r\n    </ul>\r\n    <ivue-cascader-menu\r\n      ref=\"menu\"\r\n      :options=\"data.sublist\"\r\n      :disabled=\"disabled\"\r\n      :trigger=\"trigger\"\r\n      :changeOnSelect=\"changeOnSelect\"\r\n      v-if=\"data.sublist && data.sublist.length\"\r\n    ></ivue-cascader-menu>\r\n  </span>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  reactive,\r\n  ref,\r\n  getCurrentInstance,\r\n  watch,\r\n  nextTick,\r\n  inject,\r\n} from 'vue';\r\n\r\nimport MenuItem from './menu-item.vue';\r\n\r\n// type\r\nimport { Options, CascaderContextKey, Result } from './types/cascader';\r\nimport type { Props, Data, _ComponentInternalInstance } from './types/menu';\r\n\r\nconst prefixCls = 'ivue-cascader-menu';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  emits: ['on-sublist'],\r\n  props: {\r\n    /**\r\n     * 可选项的数据源\r\n     *\r\n     * @type {Array}\r\n     */\r\n    options: {\r\n      type: Array,\r\n      default: () => [],\r\n    },\r\n    /**\r\n     * 是否禁用选择组件\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    disabled: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 当此项为 true 时，点选每级菜单选项值都会发生变化\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    changeOnSelect: {\r\n      type: Boolean,\r\n      default: false,\r\n    },\r\n    /**\r\n     * 次级菜单展开方式，可选值为 click 或 hover\r\n     *\r\n     * @type {String}\r\n     */\r\n    trigger: {\r\n      type: String,\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    const menu = ref();\r\n\r\n    // vm\r\n    const { proxy } = getCurrentInstance() as _ComponentInternalInstance;\r\n\r\n    // inject\r\n    const cascader = inject(CascaderContextKey);\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      // 临时item\r\n      tmpItem: {},\r\n      // 子列表\r\n      sublist: [],\r\n      // 结果\r\n      result: [],\r\n    });\r\n\r\n    // methods\r\n\r\n    // 获取基础项\r\n    const getBaseItem = (item: Options) => {\r\n      const backItem = Object.assign({}, item);\r\n\r\n      if (backItem.children) {\r\n        delete backItem.children;\r\n      }\r\n\r\n      return backItem;\r\n    };\r\n\r\n    // 发现选择项\r\n    const handleFindSelected = (params: { value: string[] }) => {\r\n      const val = params.value;\r\n      const value = [...val];\r\n\r\n      for (let i = 0; i < value.length; i++) {\r\n        for (let j = 0; j < props.options.length; j++) {\r\n          if (value[i] === props.options[j].value) {\r\n            // 点击当前选项\r\n            handleTriggerItem(props.options[j], true);\r\n\r\n            value.splice(0, 1);\r\n\r\n            nextTick(() => {\r\n              if (menu.value) {\r\n                menu.value.handleFindSelected({\r\n                  value: value,\r\n                });\r\n              }\r\n            });\r\n\r\n            return false;\r\n          }\r\n        }\r\n      }\r\n    };\r\n\r\n    // 当前点击的选项\r\n    const handleTriggerItem = (\r\n      item: Options,\r\n      fromInit = false,\r\n      fromUser = false\r\n    ) => {\r\n      // 禁用\r\n      if (item.disabled) {\r\n        return;\r\n      }\r\n\r\n      // 没有loading 没有子项\r\n      if (item.loading !== undefined && !item.children.length) {\r\n        if (cascader.props.loadData) {\r\n          cascader.props.loadData(item, () => {\r\n            // 加载子项\r\n            if (fromUser) {\r\n              cascader.data.isLoadedChildren = true;\r\n            }\r\n\r\n            // 有子项\r\n            if (item.children.length) {\r\n              handleTriggerItem(item);\r\n            }\r\n          });\r\n\r\n          return;\r\n        }\r\n      }\r\n\r\n      // return value back recursion  // 向上递归，设置临时选中值（并非真实选中）\r\n      const backItem = getBaseItem(item);\r\n\r\n      // 点选每级菜单选项值都会发生变化\r\n      if (\r\n        props.changeOnSelect ||\r\n        backItem.label !== data.tmpItem.label ||\r\n        backItem.value !== data.tmpItem.value ||\r\n        (backItem.label === data.tmpItem.label &&\r\n          backItem.value === data.tmpItem.value)\r\n      ) {\r\n        data.tmpItem = backItem;\r\n\r\n        // 更新结果\r\n        emitUpdate([backItem]);\r\n      }\r\n\r\n      // 有子选项\r\n      if (item.children && item.children.length) {\r\n        // 子列表\r\n        data.sublist = item.children;\r\n\r\n        // 结果变化\r\n        cascader.handleResultChange({\r\n          lastValue: false,\r\n          changeOnSelect: props.changeOnSelect,\r\n          fromInit: fromInit,\r\n        });\r\n\r\n        // 重新选择时清楚之前的数据\r\n        nextTick(() => {\r\n          menu.value.handleClear();\r\n        });\r\n      } else {\r\n        // 子列表\r\n        data.sublist = [];\r\n\r\n        // 结果变化\r\n        cascader.handleResultChange({\r\n          lastValue: true,\r\n          changeOnSelect: props.changeOnSelect,\r\n          fromInit: fromInit,\r\n        });\r\n      }\r\n\r\n      // 下拉框更新位置\r\n      cascader.dropdown.update();\r\n    };\r\n\r\n    // 点击选项\r\n    const handleClickItem = (item: Options) => {\r\n      // 次级菜单展开方式 hover\r\n      if (props.trigger !== 'click' && item.children && item.children.length) {\r\n        return;\r\n      }\r\n\r\n      // 当前点击的选项\r\n      handleTriggerItem(item, false, true);\r\n    };\r\n\r\n    // 鼠标hover\r\n    const handleHoverItem = (item: Options) => {\r\n      if (\r\n        props.trigger !== 'hover' ||\r\n        !item.children ||\r\n        !item.children.length\r\n      ) {\r\n        return;\r\n      }\r\n\r\n      // 当前点击的选项\r\n      handleTriggerItem(item, false, true);\r\n    };\r\n\r\n    // 清除数据\r\n    const handleClear = () => {\r\n      data.sublist = [];\r\n      data.tmpItem = {};\r\n    };\r\n\r\n    // 更新结果\r\n    const emitUpdate = (result: Result[]) => {\r\n      const name = proxy.$parent.$options.name;\r\n\r\n      if (name === prefixCls) {\r\n        proxy.$parent.updateResult(result);\r\n      } else {\r\n        cascader.updateResult(result);\r\n      }\r\n    };\r\n\r\n    // 更新结果\r\n    const updateResult = (item: Result[]) => {\r\n      data.result = [data.tmpItem].concat(item);\r\n\r\n      emitUpdate(data.result);\r\n    };\r\n\r\n    // 监听可选项的数据源\r\n    watch(\r\n      () => props.options,\r\n      () => {\r\n        data.sublist = [];\r\n      }\r\n    );\r\n\r\n    return {\r\n      prefixCls,\r\n      // dom\r\n      menu,\r\n\r\n      // data\r\n      data,\r\n\r\n      // methods\r\n      handleClickItem,\r\n      handleHoverItem,\r\n      handleFindSelected,\r\n      handleClear,\r\n      updateResult,\r\n    };\r\n  },\r\n  components: {\r\n    MenuItem,\r\n  },\r\n});\r\n</script>\r\n"],"names":["_resolveComponent","_createElementBlock","_openBlock","_normalizeClass","_Fragment","_renderList","_createBlock"],"mappings":";;;;;;wCACEA,iBAmBO,oBAAA,CAAA,CAAA;sBAlBLC,kBASK,CAAA,MAAA,EAAA,IAAA,EAAA;AAAA,IAAA,IAAA,CAAA,WAAA,IAAA,CAAA,OAAA,CAAA,UAAAC,SATsC,EAAA,qBAAE,IAAS,EAAA;AAAA,MAAA,GAAA,EAAA,CAAA;AAAA,MACpD,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,KAAA,EAAA;AAAA,iBAES,IAAI,CAAA,EAAAF,kBAAA,CAAAG,QAAA,EAAA,IAAA,EAAAC,UAAA,CAAA,IAAA,CAAA,OAAA,EAAA,CAAA,IAAA,EAAA,KAAA,KAAA;AACV,QAAA,OAAAH,SAAA,EAAc,EAAAI,WAAA,CAAO,oBAAA,EAAA;AAAA,UACrB,IAAA;AAAA,UACA,OAAA,EAAO,KAAA,IAAA,CAAA,OAAA;AAAA,UACP,GAAA,EAAA,KAAA;AAAA,UAAA,SAAA,IAAA,CAAA,eAAA;AAAA;;;KASG,EAAA,CAAY,wBANpB,QAOsB,IAAA,CAAA;AAAA,IAAA,IAAA,CAAA,IAAA,CAAA,OAAA,IAAA,IAAA,CAAA,IAAA,CAAA,QAAA,MAAA,IAAAJ,SAAA,EANV,EAAAI,WAAA,CAAA,6BAAA,EAAA;AAAA,MACT,GAAA,EAAA,CAAA;AAAA,MACA,GAAA,EAAA,MAAA;AAAA,MACA,OAAA,EAAS,KAAA,IAAA,CAAA,OAAA;AAAA,MACT,UAAc,IAAA,CAAA,QAAA;AAAA,MAAA,SAAA,IAAA,CAAA,OAAA;AAAA;;;;;;;;"}