xdesign-vue-next/es/select/select-panel.mjs.map

XDesign Component for vue-next

{"version":3,"file":"select-panel.mjs","sources":["../../src/select/select-panel.tsx"],"sourcesContent":["import { computed, defineComponent, inject, PropType, Slots, ref } from 'vue';\nimport omit from 'lodash/omit';\nimport { Styles } from '../common';\n\nimport { SelectOption, SelectOptionGroup, TdOptionProps } from './type';\nimport Option from './option';\nimport OptionGroup from './optionGroup';\nimport TdSelectProps from './props';\n\nimport { useTNodeJSX, useTNodeDefault } from '../hooks/tnode';\nimport { useConfig, usePrefixClass } from '../hooks/useConfig';\nimport { usePanelVirtualScroll } from './hooks/usePanelVirtualScroll';\nimport { selectInjectKey } from './helper';\n\nexport default defineComponent({\n  name: 'XSelectPanel',\n  props: {\n    inputValue: TdSelectProps.inputValue,\n    panelTopContent: TdSelectProps.panelTopContent,\n    panelBottomContent: TdSelectProps.panelBottomContent,\n    empty: TdSelectProps.empty,\n    creatable: TdSelectProps.creatable,\n    loading: TdSelectProps.loading,\n    loadingText: TdSelectProps.loadingText,\n    multiple: TdSelectProps.multiple,\n    filterable: TdSelectProps.filterable,\n    filter: TdSelectProps.filter,\n    options: {\n      type: Array as PropType<SelectOption[]>,\n      default: (): SelectOption[] => [],\n    },\n    scroll: TdSelectProps.scroll,\n    size: TdSelectProps.size,\n  },\n  setup(props, { expose }) {\n    const COMPONENT_NAME = usePrefixClass('select');\n    const renderTNodeJSX = useTNodeJSX();\n    const renderDefaultTNode = useTNodeDefault();\n    const { t, globalConfig } = useConfig('select');\n    const tSelect = inject(selectInjectKey);\n    const innerRef = ref<HTMLElement>(null);\n\n    const popupContentRef = computed(() => tSelect.value.popupContentRef.value);\n    const showCreateOption = computed(() => props.creatable && props.filterable && props.inputValue);\n    const displayOptions = computed(() => tSelect.value.displayOptions);\n\n    const { trs, visibleData, handleRowMounted, isVirtual, panelStyle, cursorStyle } = usePanelVirtualScroll({\n      scroll: props.scroll,\n      popupContentRef,\n      options: displayOptions,\n    });\n\n    const isEmpty = computed(() => !displayOptions.value.length);\n\n    const renderCreateOption = () => (\n      <ul class={[`${COMPONENT_NAME.value}__create-option`, `${COMPONENT_NAME.value}__list`]}>\n        <Option\n          value={props.inputValue}\n          label={`${props.inputValue}`}\n          createAble={true}\n          class={`${COMPONENT_NAME.value}__create-option--special`}\n        />\n      </ul>\n    );\n\n    // 递归render options\n    const renderOptionsContent = (options: SelectOption[]) => {\n      return (\n        <ul class={`${COMPONENT_NAME.value}__list`}>\n          {options.map((item: SelectOptionGroup & TdOptionProps & { slots: Slots } & { $index: number }, index) => {\n            if (item.group) {\n              return (\n                <OptionGroup label={item.group} divider={item.divider}>\n                  {renderOptionsContent(item.children)}\n                </OptionGroup>\n              );\n            }\n            return (\n              <Option\n                {...omit(item, '$index', 'className', 'tagName')}\n                {...(isVirtual.value\n                  ? {\n                      rowIndex: item.$index,\n                      trs,\n                      scrollType: props.scroll?.type,\n                      isVirtual: isVirtual.value,\n                      bufferSize: props.scroll?.bufferSize,\n                      key: `${item.$index || ''}_${index}`,\n                    }\n                  : {\n                      key: `${index}_${item.value}`,\n                    })}\n                multiple={props.multiple}\n                v-slots={item.slots}\n                onRowMounted={handleRowMounted}\n              />\n            );\n          })}\n        </ul>\n      );\n    };\n    const dropdownInnerSize = computed(() => {\n      return {\n        small: 's',\n        medium: 'm',\n        large: 'l',\n      }[tSelect.value.size];\n    });\n\n    expose({\n      innerRef,\n    });\n\n    const renderPanel = (options: SelectOption[], extraStyle?: Styles) => (\n      <div\n        ref={innerRef}\n        class={[\n          `${COMPONENT_NAME.value}__dropdown-inner`,\n          `${COMPONENT_NAME.value}__dropdown-inner--size-${dropdownInnerSize.value}`,\n        ]}\n        onClick={(e) => e.stopPropagation()}\n        style={extraStyle}\n      >\n        {}\n        {/* create option */}\n        {showCreateOption.value && renderCreateOption()}\n        {/* loading状态 */}\n        {props.loading &&\n          renderDefaultTNode('loadingText', {\n            defaultNode: <div class={`${COMPONENT_NAME.value}__loading-tips`}>{t(globalConfig.value.loadingText)}</div>,\n          })}\n        {/* 空状态 */}\n        {!props.loading &&\n          isEmpty.value &&\n          !showCreateOption.value &&\n          renderDefaultTNode('empty', {\n            defaultNode: <div class={`${COMPONENT_NAME.value}__empty`}>{t(globalConfig.value.empty)}</div>,\n          })}\n        {!isEmpty.value && !props.loading && renderOptionsContent(options)}\n      </div>\n    );\n    return {\n      renderPanel,\n      panelStyle,\n      cursorStyle,\n      isVirtual,\n      displayOptions,\n      visibleData,\n      renderTNodeJSX,\n    };\n  },\n  render() {\n    return this.isVirtual ? (\n      <>\n        {this.renderTNodeJSX('panelTopContent')}\n        <div>\n          <div style={this.cursorStyle}></div>\n          {this.renderPanel(this.visibleData, this.panelStyle)}\n        </div>\n        {this.renderTNodeJSX('panelBottomContent')}\n      </>\n    ) : (\n      <>\n        {this.renderTNodeJSX('panelTopContent')}\n        {this.renderPanel(this.displayOptions)}\n        {this.renderTNodeJSX('panelBottomContent')}\n      </>\n    );\n  },\n});\n"],"names":["_isVNode","name","props","options","type","setup","popupContentRef","_createVNode","trs","small","medium","large","expose","innerRef","defaultNode","renderPanel","panelStyle","cursorStyle","isVirtual","displayOptions","visibleData","renderTNodeJSX","_Fragment"],"mappings":"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"}