{"version":3,"file":"tour2.mjs","names":[],"sources":["../../../../../../packages/components/tour/src/tour.vue"],"sourcesContent":["<template>\n  <teleport :to=\"appendTo\">\n    <div :class=\"kls\" v-bind=\"$attrs\">\n      <el-tour-mask\n        :visible=\"mergedShowMask\"\n        :fill=\"mergedMaskStyle?.color\"\n        :style=\"mergedMaskStyle?.style\"\n        :pos=\"pos\"\n        :z-index=\"mergedZIndex\"\n        :target-area-clickable=\"targetAreaClickable\"\n      />\n      <el-tour-content\n        v-if=\"modelValue\"\n        :key=\"current\"\n        :reference=\"triggerTarget\"\n        :placement=\"mergedPlacement\"\n        :show-arrow=\"mergedShowArrow\"\n        :z-index=\"mergedZIndex\"\n        :style=\"mergedContentStyle\"\n        @close=\"onEscClose\"\n      >\n        <el-tour-steps :current=\"current\" @update-total=\"onUpdateTotal\">\n          <slot />\n        </el-tour-steps>\n      </el-tour-content>\n    </div>\n  </teleport>\n  <!-- just for IDE -->\n  <slot v-if=\"false\" name=\"indicators\" :current=\"current + 1\" :total=\"total\" />\n</template>\n\n<script lang=\"ts\" setup>\nimport { computed, provide, ref, toRef, useSlots, watch } from 'vue'\nimport { useNamespace, useZIndex } from '@element-plus/hooks'\nimport { isBoolean, isUndefined } from '@element-plus/utils'\nimport { CHANGE_EVENT, UPDATE_MODEL_EVENT } from '@element-plus/constants'\nimport ElTourMask from './mask.vue'\nimport ElTourContent from './content.vue'\nimport ElTourSteps from './steps'\nimport { tourEmits } from './tour'\nimport { tourKey, useTarget } from './helper'\n\nimport type { TourStepProps } from './step'\nimport type { TourProps } from './tour'\n\ndefineOptions({\n  name: 'ElTour',\n  inheritAttrs: false,\n})\n\nconst props = withDefaults(defineProps<TourProps>(), {\n  showArrow: true,\n  showClose: true,\n  placement: 'bottom',\n  mask: true,\n  gap: () => ({ offset: 6, radius: 2 }),\n  scrollIntoViewOptions: () => ({ block: 'center' }),\n  appendTo: 'body',\n  closeOnPressEscape: true,\n  targetAreaClickable: true,\n})\nconst emit = defineEmits(tourEmits)\n\nconst ns = useNamespace('tour')\nconst total = ref(0)\nconst currentStep = ref<TourStepProps>()\nconst isControlled = computed(() => !isUndefined(props.current))\nconst innerCurrent = ref(props.current ?? 0)\n\nconst current = computed<number>({\n  get() {\n    return isUndefined(props.current) ? innerCurrent.value : props.current\n  },\n  set(newValue) {\n    const oldValue = isControlled.value ? props.current : innerCurrent.value\n    if (oldValue === newValue) return\n\n    if (!isControlled.value) {\n      innerCurrent.value = newValue\n    }\n\n    emit('update:current', newValue)\n  },\n})\n\nconst currentTarget = computed(() => currentStep.value?.target)\n\nconst kls = computed(() => [\n  ns.b(),\n  mergedType.value === 'primary' ? ns.m('primary') : '',\n])\n\nconst mergedPlacement = computed(\n  () => currentStep.value?.placement || props.placement\n)\n\nconst mergedContentStyle = computed(\n  () => currentStep.value?.contentStyle ?? props.contentStyle\n)\n\nconst mergedMask = computed(() => currentStep.value?.mask ?? props.mask)\nconst mergedShowMask = computed(() => !!mergedMask.value && props.modelValue)\nconst mergedMaskStyle = computed(() =>\n  isBoolean(mergedMask.value) ? undefined : mergedMask.value\n)\n\nconst mergedShowArrow = computed(\n  () =>\n    !!currentTarget.value && (currentStep.value?.showArrow ?? props.showArrow)\n)\n\nconst mergedScrollIntoViewOptions = computed(\n  () => currentStep.value?.scrollIntoViewOptions ?? props.scrollIntoViewOptions\n)\nconst mergedType = computed(() => currentStep.value?.type ?? props.type)\n\nconst { nextZIndex } = useZIndex()\nconst nowZIndex = nextZIndex()\nconst mergedZIndex = computed(() => props.zIndex ?? nowZIndex)\n\nconst { mergedPosInfo: pos, triggerTarget } = useTarget(\n  currentTarget,\n  toRef(props, 'modelValue'),\n  toRef(props, 'gap'),\n  mergedMask,\n  mergedScrollIntoViewOptions\n)\n\nwatch(\n  () => props.current,\n  (val) => !isUndefined(val) && (innerCurrent.value = val)\n)\n\nwatch(\n  current,\n  (newCurrent, oldCurrent) => {\n    if (!props.modelValue || newCurrent === oldCurrent) return\n    emit(CHANGE_EVENT, newCurrent)\n  },\n  { flush: 'post' }\n)\n\nwatch(\n  () => props.modelValue,\n  (val) => {\n    if (!val && current.value !== 0) {\n      current.value = 0\n    }\n  }\n)\n\nconst onEscClose = () => {\n  if (props.closeOnPressEscape) {\n    emit(UPDATE_MODEL_EVENT, false)\n    emit('close', current.value)\n  }\n}\n\nconst onUpdateTotal = (val: number) => {\n  total.value = val\n}\n\nconst slots = useSlots()\n\nprovide(tourKey, {\n  currentStep,\n  current,\n  total,\n  showClose: toRef(props, 'showClose'),\n  closeIcon: toRef(props, 'closeIcon'),\n  mergedType,\n  ns,\n  slots,\n  updateModelValue(modelValue) {\n    emit(UPDATE_MODEL_EVENT, modelValue)\n  },\n  onClose() {\n    emit('close', current.value)\n  },\n  onFinish() {\n    emit('finish')\n  },\n})\n</script>\n"],"mappings":""}