xdesign-vue-next/es/dropdown/dropdown-menu.mjs.map

XDesign Component for vue-next

{"version":3,"file":"dropdown-menu.mjs","sources":["../../src/dropdown/dropdown-menu.tsx"],"sourcesContent":["import { defineComponent, ref, onMounted, h, reactive } from 'vue';\nimport DropdownItem from './dropdown-item';\n\nimport { DropdownOption } from './type';\nimport DropdownProps from './props';\nimport TDivider from '../divider';\nimport { usePrefixClass } from '../hooks/useConfig';\nimport { TNode } from '../common';\nimport isFunction from 'lodash/isFunction';\n\nexport default defineComponent({\n  name: 'XDropdownMenu',\n  props: { ...DropdownProps },\n  setup(props) {\n    const dropdownClass = usePrefixClass('dropdown');\n    const dropdownMenuClass = usePrefixClass('dropdown__menu');\n    const scrollTopMap = reactive({});\n    const menuRef = ref<HTMLElement>();\n    const isOverMaxHeight = ref(false);\n\n    const handleItemClick = (options: { data: DropdownOption; context: { e: MouseEvent } }) => {\n      const { data, context } = options;\n      data?.onClick?.(data, context);\n      props.onClick?.(data, context);\n    };\n\n    const handleScroll = (e: MouseEvent, deep: number) => {\n      const { scrollTop } = e.target as HTMLElement;\n      scrollTopMap[deep] = scrollTop;\n    };\n\n    onMounted(() => {\n      if (menuRef.value) {\n        const menuHeight = parseInt(window?.getComputedStyle(menuRef.value).height, 10);\n        if (menuHeight >= props.maxHeight) isOverMaxHeight.value = true;\n      }\n    });\n\n    const getContent = (content: string | TNode) => {\n      if (isFunction(content)) {\n        return content(h);\n      }\n      return content;\n    };\n\n    // 处理options渲染的场景\n    const renderOptions = (data: Array<DropdownOption>, deep: number) => {\n      const arr: Array<unknown> = [];\n      let renderContent;\n      data.forEach?.((menu, idx) => {\n        const optionItem = { ...(menu as DropdownOption) };\n        const onViewIdx = idx - Math.ceil(scrollTopMap[deep] / 30);\n        const renderIdx = onViewIdx >= 0 ? onViewIdx : idx;\n\n        if (optionItem.children) {\n          optionItem.children = renderOptions(optionItem.children, deep + 1);\n          renderContent = (\n            <div key={idx}>\n              <DropdownItem\n                style={optionItem.style}\n                class={[`${dropdownClass.value}__item`, `${dropdownClass.value}__item--suffix`, optionItem.class]}\n                value={optionItem.value}\n                theme={optionItem.theme}\n                active={optionItem.active}\n                prefixIcon={optionItem.prefixIcon}\n                disabled={optionItem.disabled}\n                minColumnWidth={props.minColumnWidth}\n                maxColumnWidth={props.maxColumnWidth}\n                isSubmenu={true}\n              >\n                <div class={`${dropdownClass.value}__item-content`}>\n                  {props.direction === 'right' ? (\n                    <>\n                      <span class={`${dropdownClass.value}__item-text`}>{getContent(optionItem.content)}</span>\n                      <icon-ri-arrow-right-s-line class={`${dropdownClass.value}__item-direction`} />\n                    </>\n                  ) : (\n                    <>\n                      <icon-ri-arrow-left-s-line class={`${dropdownClass.value}__item-direction`} />\n                      <span class={`${dropdownClass.value}__item-text`}>{getContent(optionItem.content)}</span>\n                    </>\n                  )}\n                </div>\n                <div\n                  class={[\n                    `${dropdownClass.value}__submenu-wrapper`,\n                    {\n                      [`${dropdownClass.value}__submenu-wrapper--${props.direction}`]: props.direction,\n                    },\n                  ]}\n                  style={{\n                    position: 'absolute',\n                    top: `${renderIdx * 30}px`,\n                  }}\n                >\n                  <div\n                    class={[\n                      `${dropdownClass.value}__submenu`,\n                      {\n                        [`${dropdownClass.value}__submenu--disabled`]: optionItem.disabled,\n                      },\n                    ]}\n                    style={{\n                      position: 'static',\n                      maxHeight: `${props.maxHeight}px`,\n                    }}\n                    onScroll={(e: MouseEvent) => handleScroll(e, deep + 1)}\n                  >\n                    <ul>{optionItem.children}</ul>\n                  </div>\n                </div>\n              </DropdownItem>\n              {optionItem.divider ? <TDivider /> : null}\n            </div>\n          );\n        } else {\n          renderContent = (\n            <div key={idx}>\n              <DropdownItem\n                style={optionItem.style}\n                class={[`${dropdownClass.value}__item`, optionItem.class]}\n                value={optionItem.value}\n                theme={optionItem.theme}\n                active={optionItem.active}\n                prefixIcon={optionItem.prefixIcon}\n                disabled={optionItem.disabled}\n                minColumnWidth={props.minColumnWidth}\n                maxColumnWidth={props.maxColumnWidth}\n                onClick={\n                  optionItem.disabled || optionItem.children\n                    ? () => null\n                    : (value: string | number | { [key: string]: any }, context: { e: MouseEvent }) =>\n                        handleItemClick({ data: optionItem, context })\n                }\n              >\n                <span class={`${dropdownClass.value}__item-text`}>{getContent(optionItem.content)}</span>\n              </DropdownItem>\n              {optionItem.divider ? <TDivider /> : null}\n            </div>\n          );\n        }\n        arr.push(renderContent);\n      });\n      return arr;\n    };\n\n    return () => {\n      return (\n        <div\n          class={[\n            dropdownMenuClass.value,\n            `${dropdownMenuClass.value}--${props.direction}`,\n            {\n              [`${dropdownMenuClass.value}--overflow`]: isOverMaxHeight.value,\n            },\n          ]}\n          style={{\n            maxHeight: `${props.maxHeight}px`,\n          }}\n          ref={menuRef}\n          onScroll={(e: MouseEvent) => handleScroll(e, 0)}\n        >\n          {renderOptions(props.options, 0)}\n        </div>\n      );\n    };\n  },\n});\n"],"names":["name","props","scrollTopMap","onMounted","isFunction","optionItem","renderContent","_createVNode","_resolveComponent","_Fragment","position","top","maxHeight","data","context","arr"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUA,oBAAA,eAAA,CAAA;AACEA,EAAAA,IAAAA,EAAAA,eAAAA;AACAC,EAAAA,KAAAA,EAAAA,aAAAA,CAAAA,EAAAA,EAAAA,KAAAA,CAAAA;;AAEQ,IAAA,IAAA,aAAA,GAAA,cAAA,CAAA,UAAA,CAAA,CAAA;AACA,IAAA,IAAA,iBAAA,GAAA,cAAA,CAAA,gBAAA,CAAA,CAAA;AACA,IAAA,IAAA,YAAA,GAAA,QAAA,CAAA,EAAA,CAAA,CAAA;AACN,IAAA,IAAA,OAAA,GAAA,GAAA,EAAA,CAAA;AACM,IAAA,IAAA,eAAA,GAAA,GAAA,CAAA,KAAA,CAAA,CAAA;AAEA,IAAA,IAAA,eAAA,GAAA,SAAA,eAAA,CAAA,OAAA,EAAA;;AACE,MAAA,IAAA,IAAA,GAAA,OAAA,CAAA,IAAA;;;AAEA,MAAA,CAAA,cAAA,GAAA,KAAA,CAAA,OAAA,MAAA,IAAA,IAAA,cAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,cAAA,CAAA,IAAA,CAAA,KAAA,EAAA,IAAA,EAAA,OAAA,CAAA,CAAA;;;AAIA,MAAA,IAAA,SAAA,GAAA,CAAA,CAAA,MAAA,CAAA,SAAA,CAAA;AACNC,MAAAA,YAAAA,CAAAA,IAAAA,CAAAA,GAAAA,SAAAA,CAAAA;;AAGFC,IAAAA,SAAAA,CAAAA,YAAAA;;AACqB,QAAA,IAAA,OAAA,CAAA;;;AAGnB,OAAA;AACF,KAAA,CAAA,CAAA;AAEM,IAAA,IAAA,UAAA,GAAA,SAAA,UAAA,CAAA,OAAA,EAAA;AACA,MAAA,IAAAC,YAAA,CAAA,OAAA,CAAA,EAAA;;AAEJ,OAAA;AACO,MAAA,OAAA,OAAA,CAAA;;;AAI4D,MAAA,IAAA,aAAA,CAAA;;AAE/D,MAAA,IAAA,aAAA,CAAA;AACC,MAAA,CAAA,aAAA,GAAA,IAAA,CAAA,OAAA,MAAA,IAAA,IAAA,aAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,aAAA,CAAA,IAAA,CAAA,IAAA,EAAA,UAAA,IAAA,EAAA,GAAA,EAAA;AACG,QAAA,IAAA,UAAA,GAAA,aAAA,CAAA,EAAA,EAAA,IAAA,CAAA,CAAA;AACN,QAAA,IAAA,SAAA,GAAA,GAAA,GAAA,IAAA,CAAA,IAAA,CAAA,YAAA,CAAA,IAAA,CAAA,GAAA,EAAA,CAAA,CAAA;;;AAIEC,UAAAA,UAAAA,CAAAA,QAAAA,GAAAA,aAAAA,CAAAA,UAAAA,CAAAA,QAAAA,EAAAA,IAAAA,GAAAA,CAAAA,CAAAA,CAAAA;AAEEC,UAAAA,aAAAA,GAAAA,WAAAA,CAAAA,KAAAA,EAAAA;;;;AAEsB,YAAA,OAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,QAAA,CAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,gBAAA,CAAA,EAAA,UAAA,CAAA,OAAA,CAAA,CAAA;;;;;;;;;AASP,WAAA,EAAA;AAAA,YAAA,SAAA,EAAA,SAAA,QAAA,GAAA;AAAA,cAAA,OAAA,CAAAC,WAAA,CAAA,KAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,gBAAA,CAAA;;AAIP,gBAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA;gEACkFC,uBAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,kBAAA,CAAA;AACH,eAAA,EAAA,IAAA,CAAA,CAAA,CAAA,GAAAD,WAAA,CAAAE,QAAA,EAAA,IAAA,EAAA,CAAAF,WAAA,CAAAC,uBAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,kBAAA,CAAA;AAID,eAAA,EAAA,IAAA,CAAA,EAAAD,WAAA,CAAA,MAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA;;;;AAa9EG,kBAAAA,QAAAA,EAAAA,UAAAA;AACAC,kBAAAA,GAAAA,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,SAAAA,GAAAA,EAAAA,EAAAA,IAAAA,CAAAA;AACF,iBAAA;AAAA,eAAA,EAAA,CAAAJ,WAAA,CAAA,KAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,CAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,WAAA,CAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,qBAAA,CAAA,EAAA,UAAA,CAAA,QAAA,CAAA,CAAA;;AAUIG,kBAAAA,QAAAA,EAAAA,QAAAA;AACAE,kBAAAA,SAAAA,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,KAAAA,CAAAA,SAAAA,EAAAA,IAAAA,CAAAA;;;AAE2B,kBAAA,OAAA,YAAA,CAAA,CAAA,EAAA,IAAA,GAAA,CAAA,CAAA,CAAA;AAE7B,iBAAA;AAAA,eAAA,EAAA,CAAAL,WAAA,CAAA,IAAA,EAAA,IAAA,EAAA,CAAA,UAAA,CAAA,QAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAgB,aAAA;;AAO5B,SAAA,MAAA;AAEID,UAAAA,aAAAA,GAAAA,WAAAA,CAAAA,KAAAA,EAAAA;;;;;;;;;;;;AAWI,YAAA,SAAA,EAAA,UAAA,CAAA,QAAA,IAAA,UAAA,CAAA,QAAA,GAAA,YAAA;AAEM,cAAA,OAAA,IAAA,CAAA;;AAEE,cAAA,OAAA,eAAA,CAAA;AAAkBO,gBAAAA,IAAAA,EAAAA,UAAAA;AAAkBC,gBAAAA,OAAAA,EAAAA,OAAAA;AAAQ,eAAA,CAAA,CAAA;AAGpD,aAAA;AAAA,WAAA,EAAA;AAAA,YAAA,SAAA,EAAA,SAAA,QAAA,GAAA;AAAA,cAAA,OAAA,CAAAP,WAAA,CAAA,MAAA,EAAA;AAAA,gBAAA,OAAA,EAAA,EAAA,CAAA,MAAA,CAAA,aAAA,CAAA,KAAA,EAAA,aAAA,CAAA;AAAmD,eAAA,EAAA,CAAA,UAAA,CAAA,UAAA,CAAA,OAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAA+B,aAAA;;AAK1F,SAAA;AACAQ,QAAAA,GAAAA,CAAAA,IAAAA,CAAAA,aAAAA,CAAAA,CAAAA;AACF,OAAA,CAAA,CAAA;AACO,MAAA,OAAA,GAAA,CAAA;;AAGT,IAAA,OAAA,YAAA;AAEI,MAAA,OAAAR,WAAA,CAAA,KAAA,EAAA;AAAA,QAAA,OAAA,EAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,EAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,IAAA,CAAA,CAAA,MAAA,CAAA,KAAA,CAAA,SAAA,CAAA,EAAA,eAAA,CAAA,EAAA,EAAA,EAAA,CAAA,MAAA,CAAA,iBAAA,CAAA,KAAA,EAAA,YAAA,CAAA,EAAA,eAAA,CAAA,KAAA,CAAA,CAAA;;AASIK,UAAAA,SAAAA,EAAAA,EAAAA,CAAAA,MAAAA,CAAAA,KAAAA,CAAAA,SAAAA,EAAAA,IAAAA,CAAAA;;AAEF,QAAA,KAAA,EAAA,OAAA;;AAC6B,UAAA,OAAA,YAAA,CAAA,CAAA,EAAA,CAAA,CAAA,CAAA;;;;AAMrC,GAAA;AACF,CAAA,CAAA;;;;"}