element-plus/es/components/cascader-panel/src/index.mjs.map

A Component Library for Vue 3

{"version":3,"file":"index.mjs","names":[],"sources":["../../../../../../packages/components/cascader-panel/src/index.vue"],"sourcesContent":["<template>\n  <div\n    :class=\"[ns.b('panel'), ns.is('bordered', border)]\"\n    @keydown=\"handleKeyDown\"\n  >\n    <el-cascader-menu\n      v-for=\"(menu, index) in menus\"\n      :key=\"index\"\n      :ref=\"(item) => (menuList[index] = item as CascaderMenuInstance)\"\n      :index=\"index\"\n      :nodes=\"[...menu]\"\n    >\n      <template #empty>\n        <slot name=\"empty\" />\n      </template>\n    </el-cascader-menu>\n  </div>\n</template>\n\n<script lang=\"ts\" setup>\nimport {\n  computed,\n  nextTick,\n  onBeforeUpdate,\n  onMounted,\n  provide,\n  reactive,\n  ref,\n  useSlots,\n  watch,\n} from 'vue'\nimport { cloneDeep, flattenDeep, isEqual } from 'lodash-unified'\nimport {\n  castArray,\n  focusNode,\n  getEventCode,\n  getSibling,\n  isClient,\n  isEmpty,\n  scrollIntoView,\n  unique,\n} from '@element-plus/utils'\nimport {\n  CHANGE_EVENT,\n  EVENT_CODE,\n  UPDATE_MODEL_EVENT,\n} from '@element-plus/constants'\nimport { useNamespace } from '@element-plus/hooks'\nimport ElCascaderMenu from './menu.vue'\nimport Store from './store'\nimport Node from './node'\nimport { cascaderPanelEmits, useCascaderConfig } from './config'\nimport { checkNode, getMenuIndex, sortByOriginalOrder } from './utils'\nimport { CASCADER_PANEL_INJECTION_KEY } from './types'\n\nimport type {\n  CascaderNode,\n  CascaderNodeValue,\n  CascaderOption,\n  CascaderProps,\n  CascaderValue,\n  ElCascaderPanelContext,\n} from './types'\nimport type { CascaderMenuInstance } from './instance'\nimport type { CascaderPanelProps } from './config'\n\ndefineOptions({\n  name: 'ElCascaderPanel',\n})\n\nconst props = withDefaults(defineProps<CascaderPanelProps>(), {\n  options: () => [] as CascaderOption[],\n  props: () => ({}) as CascaderProps,\n  border: true,\n})\nconst emit = defineEmits(cascaderPanelEmits)\n\n// for interrupt sync check status in lazy mode\nlet manualChecked = false\n\nconst ns = useNamespace('cascader')\nconst config = useCascaderConfig(props)\nconst slots = useSlots()\n\nlet store: Store\nconst initialLoaded = ref(true)\nconst initialLoadedOnce = ref(false)\nconst menuList = ref<CascaderMenuInstance[]>([])\nconst checkedValue = ref<CascaderValue>()\nconst menus = ref<CascaderNode[][]>([])\nconst expandingNode = ref<CascaderNode>()\nconst checkedNodes = ref<CascaderNode[]>([])\n\nconst isHoverMenu = computed(() => config.value.expandTrigger === 'hover')\nconst renderLabelFn = computed(() => props.renderLabel || slots.default)\n\nconst initStore = () => {\n  const { options } = props\n  const cfg = config.value\n\n  manualChecked = false\n  store = new Store(options, cfg)\n  menus.value = [store.getNodes()]\n\n  if (cfg.lazy && isEmpty(props.options)) {\n    initialLoaded.value = false\n    lazyLoad(undefined, (list) => {\n      if (list) {\n        store = new Store(list, cfg)\n        menus.value = [store.getNodes()]\n      }\n      initialLoaded.value = true\n      syncCheckedValue(false, true)\n    })\n  } else {\n    syncCheckedValue(false, true)\n  }\n}\n\nconst lazyLoad: ElCascaderPanelContext['lazyLoad'] = (node, cb) => {\n  const cfg = config.value\n  node! = node || new Node({}, cfg, undefined, true)\n  node.loading = true\n\n  const resolve = (dataList?: CascaderOption[]) => {\n    const _node = node as Node\n    const parent = _node.root ? null : _node\n    _node.loading = false\n    _node.loaded = true\n    _node.childrenData = _node.childrenData || []\n    dataList && store?.appendNodes(dataList, parent as Node)\n    dataList && cb?.(dataList)\n    if (node.level === 0) {\n      initialLoadedOnce.value = true\n    }\n  }\n\n  const reject = () => {\n    node!.loading = false\n    node!.loaded = false\n    if (node!.level === 0) {\n      initialLoaded.value = true\n    }\n  }\n\n  cfg.lazyLoad(node, resolve, reject)\n}\n\nconst expandNode: ElCascaderPanelContext['expandNode'] = (node, silent) => {\n  const { level } = node\n  const newMenus = menus.value.slice(0, level)\n  let newExpandingNode: CascaderNode\n\n  if (node.isLeaf) {\n    newExpandingNode = node.pathNodes[level - 2]\n  } else {\n    newExpandingNode = node\n    newMenus.push(node.children)\n  }\n\n  if (expandingNode.value?.uid !== newExpandingNode?.uid) {\n    expandingNode.value = node\n    menus.value = newMenus\n    !silent && emit('expand-change', node?.pathValues || [])\n  }\n}\n\nconst handleCheckChange: ElCascaderPanelContext['handleCheckChange'] = (\n  node,\n  checked,\n  emitClose = true\n) => {\n  const { checkStrictly, multiple } = config.value\n  const oldNode = checkedNodes.value[0]\n  manualChecked = true\n\n  !multiple && oldNode?.doCheck(false)\n  node.doCheck(checked)\n  calculateCheckedValue()\n  emitClose && !multiple && !checkStrictly && emit('close')\n  !emitClose && !multiple && expandParentNode(node)\n}\n\nconst expandParentNode = (node: Node | undefined) => {\n  if (!node) return\n  node = node.parent\n  expandParentNode(node)\n  node && expandNode(node)\n}\n\nconst getFlattedNodes = (leafOnly: boolean) => store?.getFlattedNodes(leafOnly)\n\nconst getCheckedNodes = (leafOnly: boolean) => {\n  return getFlattedNodes(leafOnly)?.filter(({ checked }) => checked !== false)\n}\n\nconst clearCheckedNodes = () => {\n  checkedNodes.value.forEach((node) => node.doCheck(false))\n  calculateCheckedValue()\n  menus.value = menus.value.slice(0, 1)\n  expandingNode.value = undefined\n  emit('expand-change', [])\n}\n\nconst calculateCheckedValue = () => {\n  const { checkStrictly, multiple } = config.value\n  const oldNodes = checkedNodes.value\n  const newNodes = getCheckedNodes(!checkStrictly)!\n  // ensure the original order\n  const nodes = sortByOriginalOrder(oldNodes, newNodes)\n  const values = nodes.map((node) => node.valueByOption)\n  checkedNodes.value = nodes\n  checkedValue.value = multiple ? values : (values[0] ?? null)\n}\n\nconst syncCheckedValue = (loaded = false, forced = false) => {\n  const { modelValue } = props\n  const { lazy, multiple, checkStrictly } = config.value\n  const leafOnly = !checkStrictly\n\n  if (\n    !initialLoaded.value ||\n    manualChecked ||\n    (!forced && isEqual(modelValue, checkedValue.value))\n  )\n    return\n\n  if (lazy && !loaded) {\n    const values: CascaderNodeValue[] = unique(\n      flattenDeep(castArray(modelValue as CascaderNodeValue[]))\n    )\n    const nodes = values\n      .map((val) => store?.getNodeByValue(val))\n      .filter((node) => !!node && !node.loaded && !node.loading) as Node[]\n\n    if (nodes.length) {\n      nodes.forEach((node) => {\n        lazyLoad(node, () => syncCheckedValue(false, forced))\n      })\n    } else {\n      syncCheckedValue(true, forced)\n    }\n  } else {\n    const values = multiple ? castArray(modelValue) : [modelValue]\n    const nodes = unique(\n      values.map((val) =>\n        store?.getNodeByValue(val as CascaderNodeValue, leafOnly)\n      )\n    ) as Node[]\n    syncMenuState(nodes, forced)\n    checkedValue.value = cloneDeep(modelValue ?? undefined)\n  }\n}\n\nconst syncMenuState = (\n  newCheckedNodes: CascaderNode[],\n  reserveExpandingState = true\n) => {\n  const { checkStrictly } = config.value\n  const oldNodes = checkedNodes.value\n  const newNodes = newCheckedNodes.filter(\n    (node) => !!node && (checkStrictly || node.isLeaf)\n  )\n  const oldExpandingNode = store?.getSameNode(expandingNode.value!)\n  const newExpandingNode =\n    (reserveExpandingState && oldExpandingNode) || newNodes[0]\n\n  if (newExpandingNode) {\n    newExpandingNode.pathNodes.forEach((node) => expandNode(node, true))\n  } else {\n    expandingNode.value = undefined\n  }\n\n  oldNodes.forEach((node) => node.doCheck(false))\n  reactive(newNodes).forEach((node) => node.doCheck(true))\n  checkedNodes.value = newNodes\n  nextTick(scrollToExpandingNode)\n}\n\nconst scrollToExpandingNode = () => {\n  if (!isClient) return\n\n  menuList.value.forEach((menu) => {\n    const menuElement = menu?.$el\n    if (menuElement) {\n      const container = menuElement.querySelector(\n        `.${ns.namespace.value}-scrollbar__wrap`\n      )\n      let activeNode = menuElement.querySelector(\n        `.${ns.b('node')}.in-active-path`\n      )\n      if (!activeNode) {\n        const activeElements = menuElement.querySelectorAll(\n          `.${ns.b('node')}.${ns.is('active')}`\n        )\n        activeNode = activeElements[activeElements.length - 1]\n      }\n      scrollIntoView(container, activeNode)\n    }\n  })\n}\n\nconst handleKeyDown = (e: KeyboardEvent) => {\n  const target = e.target as HTMLElement\n  const code = getEventCode(e)\n\n  switch (code) {\n    case EVENT_CODE.up:\n    case EVENT_CODE.down: {\n      e.preventDefault()\n      const distance = code === EVENT_CODE.up ? -1 : 1\n      focusNode(\n        getSibling(\n          target,\n          distance,\n          `.${ns.b('node')}[tabindex=\"-1\"]`\n        ) as HTMLElement\n      )\n      break\n    }\n    case EVENT_CODE.left: {\n      e.preventDefault()\n      const preMenu = menuList.value[getMenuIndex(target) - 1]\n      const expandedNode = preMenu?.$el.querySelector(\n        `.${ns.b('node')}[aria-expanded=\"true\"]`\n      )\n      focusNode(expandedNode)\n      break\n    }\n    case EVENT_CODE.right: {\n      e.preventDefault()\n      const nextMenu = menuList.value[getMenuIndex(target) + 1]\n      const firstNode = nextMenu?.$el.querySelector(\n        `.${ns.b('node')}[tabindex=\"-1\"]`\n      )\n      focusNode(firstNode)\n      break\n    }\n    case EVENT_CODE.enter:\n    case EVENT_CODE.numpadEnter:\n      checkNode(target)\n      break\n  }\n}\n\nprovide(\n  CASCADER_PANEL_INJECTION_KEY,\n  reactive({\n    config,\n    expandingNode,\n    checkedNodes,\n    isHoverMenu,\n    initialLoaded,\n    renderLabelFn,\n    lazyLoad,\n    expandNode,\n    handleCheckChange,\n  })\n)\n\nwatch(\n  config,\n  (newVal, oldVal) => {\n    if (isEqual(newVal, oldVal)) return\n    initStore()\n  },\n  {\n    immediate: true,\n  }\n)\n\nwatch(() => props.options, initStore, {\n  deep: true,\n})\n\nwatch(\n  () => props.modelValue,\n  () => {\n    manualChecked = false\n    syncCheckedValue()\n  },\n  {\n    deep: true,\n  }\n)\n\nwatch(\n  () => checkedValue.value,\n  (val) => {\n    if (!isEqual(val, props.modelValue)) {\n      emit(UPDATE_MODEL_EVENT, val)\n      emit(CHANGE_EVENT, val)\n    }\n  }\n)\n\nconst loadLazyRootNodes = () => {\n  if (initialLoadedOnce.value) return\n  initStore()\n}\n\nonBeforeUpdate(() => (menuList.value = []))\n\nonMounted(() => !isEmpty(props.modelValue) && syncCheckedValue())\n\ndefineExpose({\n  menuList,\n  menus,\n  checkedNodes,\n  handleKeyDown,\n  handleCheckChange,\n  getFlattedNodes,\n  /**\n   * @description get an array of currently selected node,(leafOnly) whether only return the leaf checked nodes, default is `false`\n   */\n  getCheckedNodes,\n  /**\n   * @description clear checked nodes\n   */\n  clearCheckedNodes,\n  calculateCheckedValue,\n  scrollToExpandingNode,\n  loadLazyRootNodes,\n})\n</script>\n"],"mappings":""}