xdesign-vue-next/es/notification/notificationList.mjs.map

XDesign Component for vue-next

{"version":3,"file":"notificationList.mjs","sources":["../../src/notification/notificationList.tsx"],"sourcesContent":["import { defineComponent, ref, computed, Ref, CSSProperties } from 'vue';\nimport Notification from './notification';\nimport { TdNotificationProps, NotificationOptions } from './type';\nimport { DEFAULT_Z_INDEX, PLACEMENT_OFFSET, DISTANCE } from './const';\nimport { usePrefixClass } from '../hooks/useConfig';\n\nexport default defineComponent({\n  props: {\n    placement: {\n      type: String,\n      default: 'top-right',\n      validator(v: string): boolean {\n        return ['top-left', 'top-right', 'bottom-left', 'bottom-right'].indexOf(v) > -1;\n      },\n    },\n  },\n  setup(props, { expose }) {\n    const COMPONENT_NAME = usePrefixClass('notification-list');\n\n    const { placement } = props as NotificationOptions;\n\n    const list: Ref<NotificationOptions[]> = ref([]);\n    const notificationList = ref([]);\n\n    const styles = computed(() => ({\n      zIndex: DEFAULT_Z_INDEX,\n      ...PLACEMENT_OFFSET[placement],\n    }));\n\n    const add = (options: TdNotificationProps): number => {\n      list.value.push(options);\n      return list.value.length - 1;\n    };\n\n    const remove = (index: number) => {\n      list.value.splice(index, 1);\n    };\n\n    const removeAll = () => {\n      list.value = [];\n    };\n\n    const getOffset = (val: string | number) => {\n      if (!val) return;\n      return isNaN(Number(val)) ? val : `${val}px`;\n    };\n\n    const notificationStyles = (item: { offset: NotificationOptions['offset']; zIndex: number }) => {\n      const styles: CSSProperties = {\n        marginBottom: DISTANCE,\n      };\n      if (item.offset) {\n        styles.position = 'relative';\n        styles.left = getOffset(item.offset[0]);\n        styles.top = getOffset(item.offset[1]);\n      }\n      if (item.zIndex) styles['z-index'] = item.zIndex;\n      return styles;\n    };\n\n    const getProps = (index: number, item: NotificationOptions) => {\n      return {\n        ...item,\n        onCloseBtnClick: (e: any) => {\n          if (item.onCloseBtnClick) {\n            item.onCloseBtnClick(e);\n          }\n          return remove(index);\n        },\n        onDurationEnd: () => {\n          if (item.onDurationEnd) {\n            item.onDurationEnd();\n          }\n          return remove(index);\n        },\n      };\n    };\n\n    const addChild = (el: Element) => {\n      if (el) {\n        notificationList.value.push(el);\n      }\n    };\n    expose({ add, remove, removeAll, list, notificationList });\n\n    return () => {\n      if (!list.value.length) return;\n\n      return (\n        <div class={`${COMPONENT_NAME.value}__show`} style={styles.value}>\n          {list.value.map((item: { offset: NotificationOptions['offset']; zIndex: number; id: number }, index) => (\n            <Notification ref={addChild} key={item.id} style={notificationStyles(item)} {...getProps(index, item)} />\n          ))}\n        </div>\n      );\n    };\n  },\n});\n"],"names":["props","placement","type","setup","zIndex","list","marginBottom","styles","onCloseBtnClick","item","notificationList","expose","add","remove","removeAll","_createVNode","Notification","_mergeProps"],"mappings":"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"}