{"version":3,"file":"mask.mjs","sources":["../../../../../../packages/components/tour/src/mask.vue"],"sourcesContent":["<template>\n  <div\n    v-if=\"visible\"\n    class=\"tour-mask\"\n    :style=\"{\n      position: 'fixed',\n      left: 0,\n      right: 0,\n      top: 0,\n      bottom: 0,\n      zIndex,\n      pointerEvents: pos && targetAreaClickable ? 'none' : 'auto',\n    }\"\n    v-bind=\"$attrs\"\n  >\n    <svg\n      :style=\"{\n        width: '100%',\n        height: '100%',\n      }\"\n    >\n      <path class=\"tour-hollow\" :style=\"pathStyle\" :d=\"path\" />\n    </svg>\n  </div>\n</template>\n\n<script setup lang=\"ts\">\nimport { computed, toRef } from 'vue'\nimport { useLockscreen } from '@hongluan-ui/hooks'\nimport { maskProps } from './mask'\nimport type { CSSProperties } from 'vue'\n\ndefineOptions({\n  name: 'TourMask',\n  inheritAttrs: false,\n})\n\nconst props = defineProps(maskProps)\n\nconst radius = computed(() => props.pos?.radius ?? 2)\nconst roundInfo = computed(() => {\n  const v = radius.value\n  const baseInfo = `a${v},${v} 0 0 1`\n  return {\n    topRight: `${baseInfo} ${v},${v}`,\n    bottomRight: `${baseInfo} ${-v},${v}`,\n    bottomLeft: `${baseInfo} ${-v},${-v}`,\n    topLeft: `${baseInfo} ${v},${-v}`,\n  }\n})\n\nconst path = computed(() => {\n  const width = window.innerWidth\n  const height = window.innerHeight\n  const info = roundInfo.value\n  const _path = `M${width},0 L0,0 L0,${height} L${width},${height} L${width},0 Z`\n  const _radius = radius.value\n  return props.pos\n    ? `${_path} M${props.pos.left + _radius},${props.pos.top} h${\n      props.pos.width - _radius * 2\n    } ${info.topRight} v${props.pos.height - _radius * 2} ${\n      info.bottomRight\n    } h${-props.pos.width + _radius * 2} ${info.bottomLeft} v${\n      -props.pos.height + _radius * 2\n    } ${info.topLeft} z`\n    : _path\n})\n\nconst pathStyle = computed<CSSProperties>(() => {\n  return {\n    fill: props.fill,\n    pointerEvents: 'auto',\n    cursor: 'auto',\n  }\n})\n\nuseLockscreen(toRef(props, 'visible'))\n</script>\n"],"names":[],"mappings":";;;;;oCAgCc;AAAA,EACZ,MAAM;AAAA,EACN,cAAc;AAChB;;;;;;AAIA,UAAM,SAAS,SAAS,MAAM;AAC9B,UAAM;AACJ,gBAAU;AACV;AACA;AAAO;AACyB,wBACd,kBAAkB;AAAA;AACA,QAClC,8BAA8B;AAAA;AAChC;AAGF,iBAAa,eAAe;AAC1B;AACA;AACA;AACA,YAAM,QAAQ;AACd,YAAM;AACN,mBAAa,SACN;AAOH;AAGN,sBAAkB;AAChB,aAAO;AAAA;AACO;AACG;AACP;AACV;AAGF;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}