@extclp/vexip-ui/es/components/spin/spin.vue2.mjs.map

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

{"version":3,"file":"spin.vue2.mjs","sources":["../../../components/spin/spin.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { Icon } from '@/components/icon'\nimport { Renderer } from '@/components/renderer'\n\nimport { computed, ref, watch } from 'vue'\n\nimport { createIconProp, emitEvent, useIcons, useNameHelper, useProps } from '@vexip-ui/config'\nimport { toNumber } from '@vexip-ui/utils'\nimport { spinProps } from './props'\n\nimport type { SpinSlots } from './symbol'\n\ndefineOptions({ name: 'Spin' })\n\nconst nh = useNameHelper('spin')\nconst _props = defineProps(spinProps)\nconst props = useProps('spin', _props, {\n  active: {\n    default: false,\n    static: true\n  },\n  icon: createIconProp(),\n  inner: false,\n  delay: false,\n  tip: '',\n  hideMask: false,\n  maskColor: '',\n  maskClass: null,\n  transitionName: () => nh.ns('fade'),\n  iconEffect: null,\n  slots: () => ({})\n})\n\nconst slots = defineSlots<SpinSlots>()\n\nconst icons = useIcons()\n\nconst currentActive = ref(props.active)\n\nconst hasTip = computed(() => !!(props.tip || slots.tip))\nconst maskStyle = computed(() => {\n  const style = {} as any\n\n  if (props.maskColor) {\n    style[nh.cv('mask-bg-color')] = props.maskColor\n  }\n\n  return style\n})\nconst delayTime = computed(() => {\n  if (props.delay) {\n    if (props.delay === true) {\n      return { enter: 500, leave: 500 }\n    }\n\n    if (typeof props.delay === 'number') {\n      return { enter: props.delay, leave: props.delay }\n    }\n\n    if (Array.isArray(props.delay)) {\n      return { enter: toNumber(props.delay[0]), leave: toNumber(props.delay[1]) }\n    }\n  }\n\n  return { enter: 0, leave: 0 }\n})\n\nlet timer: ReturnType<typeof setTimeout>\n\nwatch(\n  () => props.active,\n  value => {\n    clearTimeout(timer)\n\n    const delay = value ? delayTime.value.enter : delayTime.value.leave\n\n    if (delay) {\n      timer = setTimeout(() => {\n        currentActive.value = value\n      }, delay)\n    } else {\n      currentActive.value = value\n    }\n  }\n)\n\ndefineExpose({\n  currentActive,\n  hasTip,\n  handleShow,\n  handleHide\n})\n\nfunction handleMaskClick(event: MouseEvent) {\n  emitEvent(props.onMaskClick, event)\n}\n\nfunction handleShow() {\n  emitEvent(props.onShow)\n}\n\nfunction handleHide() {\n  emitEvent(props.onHide)\n}\n</script>\n\n<template>\n  <div\n    v-if=\"!props.inner\"\n    :class=\"[nh.b(), nh.bs('vars'), props.inherit && nh.bm('inherit')]\"\n    :aria-busy=\"currentActive ? 'true' : undefined\"\n  >\n    <slot>\n      <Renderer :renderer=\"props.slots.default\"></Renderer>\n    </slot>\n    <Transition\n      appear\n      :name=\"props.transitionName\"\n      @after-enter=\"handleShow\"\n      @after-leave=\"handleHide\"\n    >\n      <div v-if=\"currentActive\" :class=\"nh.be('loading')\">\n        <div\n          v-if=\"!props.hideMask\"\n          :class=\"[nh.be('mask'), props.maskClass]\"\n          :style=\"maskStyle\"\n          @click=\"handleMaskClick\"\n        ></div>\n        <slot name=\"content\">\n          <Renderer :renderer=\"props.slots.content\">\n            <div :class=\"nh.be('icon')\">\n              <slot name=\"icon\">\n                <Renderer :renderer=\"props.slots.icon\">\n                  <Icon\n                    v-bind=\"icons.loading\"\n                    :icon=\"props.icon || icons.loading.icon\"\n                    :effect=\"props.iconEffect || icons.loading.effect\"\n                    label=\"loading\"\n                  ></Icon>\n                </Renderer>\n              </slot>\n            </div>\n            <div v-if=\"hasTip\" :class=\"nh.be('tip')\">\n              <slot name=\"tip\">\n                <Renderer :renderer=\"props.slots.tip\">\n                  {{ props.tip }}\n                </Renderer>\n              </slot>\n            </div>\n          </Renderer>\n        </slot>\n      </div>\n    </Transition>\n  </div>\n  <Transition\n    v-else\n    appear\n    :name=\"props.transitionName\"\n    @after-enter=\"handleShow\"\n    @after-leave=\"handleHide\"\n  >\n    <div v-if=\"currentActive\" :class=\"[nh.b(), nh.bs('vars'), nh.bm('inner')]\">\n      <div\n        v-if=\"!props.hideMask\"\n        :class=\"[nh.be('mask'), props.maskClass]\"\n        :style=\"maskStyle\"\n        @click=\"handleMaskClick\"\n      ></div>\n      <slot name=\"content\">\n        <Renderer :renderer=\"props.slots.content\">\n          <div :class=\"nh.be('icon')\">\n            <slot name=\"icon\">\n              <Renderer :renderer=\"props.slots.icon\">\n                <Icon\n                  v-bind=\"icons.loading\"\n                  :icon=\"props.icon || icons.loading.icon\"\n                  :effect=\"props.iconEffect || icons.loading.effect\"\n                  label=\"loading\"\n                ></Icon>\n              </Renderer>\n            </slot>\n          </div>\n          <div v-if=\"hasTip\" :class=\"nh.be('tip')\">\n            <slot name=\"tip\">\n              <Renderer :renderer=\"props.slots.tip\">\n                {{ props.tip }}\n              </Renderer>\n            </slot>\n          </div>\n        </Renderer>\n      </slot>\n    </div>\n  </Transition>\n</template>\n"],"names":["nh","useNameHelper","props","useProps","__props","createIconProp","slots","_useSlots","icons","useIcons","currentActive","ref","hasTip","computed","maskStyle","style","delayTime","toNumber","timer","watch","value","delay","__expose","handleShow","handleHide","handleMaskClick","event","emitEvent"],"mappings":";;;;;;;;;;;;;AAcM,UAAAA,IAAKC,EAAc,MAAM,GAEzBC,IAAQC,EAAS,QADRC,GACwB;AAAA,MACrC,QAAQ;AAAA,QACN,SAAS;AAAA,QACT,QAAQ;AAAA,MACV;AAAA,MACA,MAAMC,EAAe;AAAA,MACrB,OAAO;AAAA,MACP,OAAO;AAAA,MACP,KAAK;AAAA,MACL,UAAU;AAAA,MACV,WAAW;AAAA,MACX,WAAW;AAAA,MACX,gBAAgB,MAAML,EAAG,GAAG,MAAM;AAAA,MAClC,YAAY;AAAA,MACZ,OAAO,OAAO,CAAC;AAAA,IAAA,CAChB,GAEKM,IAAQC,EAAA,GAERC,IAAQC,EAAS,GAEjBC,IAAgBC,EAAIT,EAAM,MAAM,GAEhCU,IAASC,EAAS,MAAM,CAAC,EAAEX,EAAM,OAAOI,EAAM,IAAI,GAClDQ,IAAYD,EAAS,MAAM;AAC/B,YAAME,IAAQ,CAAC;AAEf,aAAIb,EAAM,cACRa,EAAMf,EAAG,GAAG,eAAe,CAAC,IAAIE,EAAM,YAGjCa;AAAA,IAAA,CACR,GACKC,IAAYH,EAAS,MAAM;AAC/B,UAAIX,EAAM,OAAO;AACX,YAAAA,EAAM,UAAU;AAClB,iBAAO,EAAE,OAAO,KAAK,OAAO,IAAI;AAG9B,YAAA,OAAOA,EAAM,SAAU;AACzB,iBAAO,EAAE,OAAOA,EAAM,OAAO,OAAOA,EAAM,MAAM;AAGlD,YAAI,MAAM,QAAQA,EAAM,KAAK;AAC3B,iBAAO,EAAE,OAAOe,EAASf,EAAM,MAAM,CAAC,CAAC,GAAG,OAAOe,EAASf,EAAM,MAAM,CAAC,CAAC,EAAE;AAAA,MAC5E;AAGF,aAAO,EAAE,OAAO,GAAG,OAAO,EAAE;AAAA,IAAA,CAC7B;AAEG,QAAAgB;AAEJ,IAAAC;AAAA,MACE,MAAMjB,EAAM;AAAA,MACZ,CAASkB,MAAA;AACP,qBAAaF,CAAK;AAElB,cAAMG,IAAQD,IAAQJ,EAAU,MAAM,QAAQA,EAAU,MAAM;AAE9D,QAAIK,IACFH,IAAQ,WAAW,MAAM;AACvB,UAAAR,EAAc,QAAQU;AAAA,WACrBC,CAAK,IAERX,EAAc,QAAQU;AAAA,MACxB;AAAA,IAEJ,GAEaE,EAAA;AAAA,MACX,eAAAZ;AAAA,MACA,QAAAE;AAAA,MACA,YAAAW;AAAA,MACA,YAAAC;AAAA,IAAA,CACD;AAED,aAASC,EAAgBC,GAAmB;AAChC,MAAAC,EAAAzB,EAAM,aAAawB,CAAK;AAAA,IAAA;AAGpC,aAASH,IAAa;AACpB,MAAAI,EAAUzB,EAAM,MAAM;AAAA,IAAA;AAGxB,aAASsB,IAAa;AACpB,MAAAG,EAAUzB,EAAM,MAAM;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}