ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-select/drop-down.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"drop-down.mjs","sources":["../../../../../src/components/ivue-select/drop-down.vue"],"sourcesContent":["<template>\r\n  <div\r\n    class=\"ivue-select-dropdown\"\r\n    :class=\"className\"\r\n    :style=\"{\r\n      minWidth,\r\n      ...styles,\r\n    }\"\r\n  >\r\n    <slot></slot>\r\n  </div>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport {\r\n  defineComponent,\r\n  computed,\r\n  reactive,\r\n  onMounted,\r\n  inject,\r\n  nextTick,\r\n  getCurrentInstance,\r\n  onBeforeUnmount,\r\n} from 'vue';\r\nimport { getStyle } from '../../utils/assist';\r\nimport { transferIndex, transferIncrease } from '../../utils/transfer-queue';\r\n\r\n// createPopper\r\nimport { createPopper } from '@popperjs/core';\r\n\r\n// type\r\nimport type { Props, Data } from './types/drop-down';\r\nimport { SelectContextKey } from './types/select';\r\n\r\nconst prefixCls = 'ivue-select-dropdown';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 外层样式\r\n     *\r\n     * @type {String}\r\n     */\r\n    className: {\r\n      type: String,\r\n    },\r\n    /**\r\n     * 是否将弹层放置于 body 内，在 Tabs、\r\n     * 带有 fixed 的 Table 列内使用时，\r\n     * 建议添加此属性，它将不受父级样式影响，\r\n     * 从而达到更好的效果\r\n     *\r\n     * @type {Boolean}\r\n     */\r\n    transfer: {\r\n      type: Boolean,\r\n      default() {\r\n        const global = getCurrentInstance().appContext.config.globalProperties;\r\n\r\n        return !global.$IVUE || global.$IVUE.transfer === ''\r\n          ? false\r\n          : global.$IVUE.transfer;\r\n      },\r\n    },\r\n    /**\r\n     * 弹窗的展开方向，\r\n     * 可选值为 top、bottom、top-start、bottom-start、top-end、bottom-end\r\n     *\r\n     * @type {String}\r\n     */\r\n    placement: {\r\n      type: String,\r\n      default: 'bottom-start',\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // inject\r\n    const select = inject(SelectContextKey);\r\n\r\n    // vm\r\n    const { proxy } = getCurrentInstance();\r\n\r\n    // 获取Index\r\n    const handleGetIndex = () => {\r\n      transferIncrease();\r\n      return transferIndex;\r\n    };\r\n\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 是否显示菜单\r\n       *\r\n       * @type {String}\r\n       */\r\n      width: '',\r\n      /**\r\n       * index\r\n       *\r\n       * @type {Number}\r\n       */\r\n      tIndex: handleGetIndex(),\r\n      /**\r\n       * popper\r\n       *\r\n       * @type {Function}\r\n       */\r\n      popper: null,\r\n      /**\r\n       * popper状态\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      popperStatus: false,\r\n    });\r\n\r\n    // computed\r\n    const styles = computed(() => {\r\n      const style: {\r\n        zIndex?: number;\r\n      } = {};\r\n\r\n      if (props.transfer) {\r\n        style['z-index'] = 1060 + data.tIndex;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    const minWidth = computed(() => {\r\n      return select && `${getStyle(select.selectWrapper, 'width')}`;\r\n    });\r\n\r\n    // methods\r\n\r\n    // 更新数据\r\n    const update = () => {\r\n      nextTick(() => {\r\n        // 是否已经注册了 popper\r\n        if (data.popper) {\r\n          data.popper.update();\r\n          data.popperStatus = true;\r\n        } else {\r\n          data.popper = createPopper(select.reference, proxy.$el, {\r\n            // 弹窗的展开方向，\r\n            placement: props.placement,\r\n            modifiers: [\r\n              // 这决定了是否使用 GPU 加速样式来定位 popper\r\n              {\r\n                name: 'computeStyles',\r\n                options: {\r\n                  gpuAcceleration: false, // true by default\r\n                },\r\n              },\r\n              //检测溢出\r\n              {\r\n                name: 'preventOverflow',\r\n                options: {\r\n                  rootBoundary: 'viewport',\r\n                },\r\n              },\r\n              {\r\n                name: 'offset',\r\n                options: {\r\n                  offset: [0, 5],\r\n                },\r\n              },\r\n            ],\r\n            onFirstUpdate: () => {\r\n              nextTick(() => {\r\n                data.popper && data.popper.update();\r\n              });\r\n            },\r\n          });\r\n        }\r\n\r\n        data.tIndex = handleGetIndex();\r\n      });\r\n    };\r\n\r\n    // 销毁\r\n    const destroy = () => {\r\n      if (data.popper) {\r\n        setTimeout(() => {\r\n          if (data.popper && !data.popperStatus) {\r\n            data.popper.destroy();\r\n            data.popper = null;\r\n          }\r\n\r\n          data.popperStatus = false;\r\n        }, 300);\r\n      }\r\n    };\r\n\r\n    // onMounted\r\n    onMounted(() => {\r\n      update();\r\n    });\r\n\r\n    // beforeUnmount\r\n    onBeforeUnmount(() => {\r\n      if (data.popper) {\r\n        data.popper.destroy();\r\n        data.popper = null;\r\n      }\r\n    });\r\n\r\n    return {\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      styles,\r\n      minWidth,\r\n\r\n      // methods\r\n      update,\r\n      destroy,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle"],"mappings":";;;;SAES,YAAC,IAAA,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAsB,OACpB,QAAS,EAAA;AACX,EAAA,OAAAA,SAAA,EAAA,EAAAC,kBAAA,CAAA,KAAA,EAAA;AAAA,IAAA,OAAAC,cAAW,CAAA,CAAQ,sBAAA,EAAA,IAAA,CAAA,SAAA,CAAA,CAAA;AAAA,IAAA,OAAYC,cAAM,CAAA;AAAA,MAAA,UAAA,IAAA,CAAA,QAAA;AAAA;KAK3C,CAAA;AAAA,GAAA,EAAA;AAAA;;;;;;;"}