vexip-ui/lib/components/popup/popup.vue2.cjs.map

A Vue 3 UI library, Highly customizability, full TypeScript, performance pretty good

{"version":3,"file":"popup.vue2.cjs","sources":["../../../components/popup/popup.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed, provide, reactive, ref, watch } from 'vue'\n\nimport PopupItem from './popup-item.vue'\nimport { classProp, useNameHelper } from '@vexip-ui/config'\nimport { getGlobalCount, isFunction, noop } from '@vexip-ui/utils'\nimport { DELETE_HANDLER, popupPlacements } from './symbol'\n\nimport type { CSSProperties } from 'vue'\nimport type { Key, PopupItemState, PopupPlacement } from './symbol'\n\ntype QueueState =\n  | {\n    type: 'add',\n    param: Record<string, unknown>,\n  }\n  | {\n    type: 'clear',\n    param: Key,\n  }\n\ndefineOptions({ name: 'Popup' })\n\nconst props = defineProps({\n  transitionName: {\n    type: String,\n    default: null,\n  },\n  innerClass: {\n    type: classProp,\n    default: null,\n  },\n  placement: {\n    default: 'top-right' as PopupPlacement,\n    validator: (value: PopupPlacement) => popupPlacements.includes(value),\n  },\n  startOffset: {\n    type: Number,\n    default: 30,\n  },\n  itemGap: {\n    type: Number,\n    default: 16,\n  },\n})\n\ndefineSlots<{ item: (item: any) => any }>()\n\nconst nh = useNameHelper('popup')\nconst items = ref<PopupItemState[]>([])\nconst queue: QueueState[] = []\n\nconst wrapper = ref<HTMLElement>()\n\nlet pending = false\n\nconst placementArray = computed(() => {\n  return props.placement.split('-') as ['top' | 'bottom', 'right' | 'center' | 'left']\n})\nconst transition = computed(() => props.transitionName || nh.ns('popup-top'))\n\nwatch(\n  () => props.startOffset,\n  (value, prevValue) => {\n    items.value.forEach(item => {\n      item.verticalPosition += value - prevValue\n    })\n  },\n)\n\nprovide(DELETE_HANDLER, deleteItem)\n\ndefineExpose({\n  items,\n  wrapper,\n  add,\n  remove,\n  has,\n  find,\n  clear,\n})\n\nfunction getItemStyle(item: PopupItemState) {\n  const verticalStyle = placementArray.value[0]\n  const style: CSSProperties = { [verticalStyle]: `${item.verticalPosition}px` }\n  const zIndex = parseInt(item.zIndex as string)\n\n  if (!Number.isNaN(zIndex)) {\n    style.zIndex = zIndex\n  }\n\n  return style\n}\n\nfunction add(options: Record<string, any>) {\n  return new Promise<Key>(resolve => {\n    const onOpen = isFunction(options.onOpen) ? options.onOpen : noop\n\n    options.onOpen = (key: Key) => {\n      resolve(key)\n      onOpen()\n    }\n\n    queue.push({\n      type: 'add',\n      param: options,\n    })\n\n    if (!pending) {\n      pending = true\n      queueOut()\n    }\n  })\n}\n\nfunction remove(key: Key) {\n  return new Promise<boolean>(resolve => {\n    const item = find(key)\n\n    if (!item) return resolve(false)\n\n    const onClose = isFunction(item.onClose) ? item.onClose : noop\n\n    item.onClose = (result: boolean) => {\n      resolve(result)\n      onClose(result)\n    }\n\n    queue.push({\n      type: 'clear',\n      param: key,\n    })\n\n    if (!pending) {\n      pending = true\n      queueOut()\n    }\n  })\n}\n\nfunction queueOut() {\n  if (queue.length) {\n    const state = queue.shift()!\n\n    if (state.type === 'add') {\n      renderItem(state.param)\n    } else {\n      removeItem(state.param)\n    }\n\n    requestAnimationFrame(queueOut)\n  } else {\n    pending = false\n  }\n}\n\nfunction renderItem(options: Record<string, any>) {\n  let item = options.key ? find(options.key as Key) : null\n\n  if (!item?.visible) {\n    const index = getGlobalCount()\n    const key = (options.key as Key) ?? nh.bs(`${index}`)\n\n    let currentVertical = props.startOffset\n\n    items.value.forEach(existingItem => {\n      if (existingItem.visible) {\n        currentVertical += existingItem.height + props.itemGap\n      }\n    })\n\n    item = reactive(\n      Object.assign(\n        {\n          key,\n          content: '',\n          closable: false,\n          onOpen: noop,\n          onClose: noop,\n          onEnter: noop,\n          onLeave: noop,\n        },\n        options,\n        {\n          height: 0,\n          visible: true,\n          verticalPosition: currentVertical,\n        },\n      ),\n    )\n\n    items.value.push(item)\n  }\n\n  // 使用 options 上的回调以防止重复 key 时指向不正确\n  isFunction(options.onOpen) && options.onOpen(item.key)\n}\n\nfunction removeItem(key: Key) {\n  const index = items.value.findIndex(item => item.key === key)\n\n  if (~index) {\n    const item = items.value[index]\n    const removeHeight = item.height\n\n    item.visible = false\n\n    for (let i = index + 1, len = items.value.length; i < len; ++i) {\n      items.value[i].verticalPosition -= removeHeight + props.itemGap\n    }\n\n    // 关闭回调\n    isFunction(item.onClose) && item.onClose(true)\n  }\n}\n\nfunction deleteItem(key: Key) {\n  const index = items.value.findIndex(item => item.key === key)\n\n  if (~index) {\n    items.value.splice(index, 1)\n  }\n}\n\nfunction has(key: Key) {\n  return !~items.value.findIndex(item => item.key === key)\n}\n\nfunction find(key: Key) {\n  return items.value.find(item => item.key === key)\n}\n\nfunction clear() {\n  queue.length = 0\n  items.value = []\n}\n\nfunction enterItem(item: PopupItemState) {\n  isFunction(item.onEnter) && item.onEnter()\n}\n\nfunction leaveItem(item: PopupItemState) {\n  isFunction(item.onLeave) && item.onLeave()\n}\n</script>\n\n<template>\n  <div :class=\"[nh.b(), nh.bm(placement)]\">\n    <PopupItem\n      v-for=\"item in items\"\n      :key=\"item.key\"\n      :state=\"item\"\n      :transition-name=\"transition\"\n      :inner-class=\"innerClass\"\n      :style=\"getItemStyle(item)\"\n      @enter=\"enterItem(item)\"\n      @leave=\"leaveItem(item)\"\n    >\n      <template #default=\"{ item: itemData }\">\n        <slot name=\"item\" :item=\"itemData\"></slot>\n      </template>\n    </PopupItem>\n  </div>\n</template>\n"],"names":["props","__props","nh","useNameHelper","items","ref","queue","wrapper","pending","placementArray","computed","transition","watch","value","prevValue","item","provide","DELETE_HANDLER","deleteItem","__expose","add","remove","has","find","clear","getItemStyle","style","zIndex","options","resolve","onOpen","isFunction","noop","key","queueOut","onClose","result","state","renderItem","removeItem","index","getGlobalCount","currentVertical","existingItem","reactive","removeHeight","i","len","enterItem","leaveItem","_createElementBlock","_normalizeClass","_unref","_Fragment","_renderList","_createBlock","PopupItem","_normalizeStyle","$event","_withCtx","itemData","_renderSlot","_ctx"],"mappings":"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"}