hongluan-ui/es/components/steps/src/item2.mjs.map

Hongluan Component Library for Vue 3

{"version":3,"file":"item2.mjs","sources":["../../../../../../packages/components/steps/src/item.vue"],"sourcesContent":["<template>\n  <div :class=\"[namespace, `is-${parent.props.dir}`, isCenter && !isVertical && !isInline && 'is-center', `is-${currentStatus}`]\">\n    <template v-if=\"isInline\">\n      <div\n        :class=\"[\n          'step-icon',\n          `is-${$slots.icon ? 'icon' : 'text'}`,\n          parent.props.round ? 'round' : '',\n        ]\"\n      >\n        <slot v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\" name=\"icon\">\n          <div v-if=\"!$slots.icon\" class=\"icon-inner\">{{ index + 1 }}</div>\n        </slot>\n        <slot v-else-if=\"currentStatus == 'success'\" name=\"success-icon\">\n          <hl-icon :class=\"['icon-inner', 'is-status']\">\n            <system-checked />\n          </hl-icon>\n        </slot>\n        <slot v-else-if=\"currentStatus == 'error'\" name=\"error-icon\">\n          <hl-icon :class=\"['icon-inner', 'is-status']\">\n            <system-close />\n          </hl-icon>\n        </slot>\n      </div>\n      <div class=\"step-main\">\n        <div class=\"step-head\">\n          <div class=\"step-title\">\n            <slot name=\"title\">{{ title }}</slot>\n          </div>\n          <div class=\"step-line\">\n            <slot name=\"line\"><hr></slot>\n          </div>\n        </div>\n        <div v-if=\"description || $slots.description\" class=\"step-description\">\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n      </div>\n    </template>\n\n    <template v-else>\n      <div class=\"step-head\">\n        <div\n          :class=\"[\n            'step-icon',\n            `is-${$slots.icon ? 'icon' : 'text'}`,\n            parent.props.round ? 'round' : '',\n          ]\"\n        >\n          <slot v-if=\"currentStatus !== 'success' && currentStatus !== 'error'\" name=\"icon\">\n            <div v-if=\"!$slots.icon\" class=\"icon-inner\">{{ index + 1 }}</div>\n          </slot>\n          <slot v-else-if=\"currentStatus == 'success'\" name=\"success-icon\">\n            <hl-icon :class=\"['icon-inner', 'is-status']\">\n              <system-checked />\n            </hl-icon>\n          </slot>\n          <slot v-else-if=\"currentStatus == 'error'\" name=\"error-icon\">\n            <hl-icon :class=\"['icon-inner', 'is-status']\">\n              <system-close />\n            </hl-icon>\n          </slot>\n        </div>\n        <div class=\"step-line\">\n        </div>\n      </div>\n      <!-- title & description -->\n      <div class=\"step-main\">\n        <div class=\"step-title\">\n          <slot name=\"title\">{{ title }}</slot>\n        </div>\n        <div v-if=\"description || $slots.description\" class=\"step-description\">\n          <slot name=\"description\">{{ description }}</slot>\n        </div>\n      </div>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport { defineComponent, ref, computed, inject, watch, onBeforeUnmount, onMounted, getCurrentInstance, reactive } from 'vue'\nimport { useNamespace } from '@hongluan-ui/hooks'\nimport HlIcon from '@hongluan-ui/components/icon'\nimport { SystemChecked, SystemClose } from '@hongluan-ui/components/system-icon'\nimport { stepProps } from './item'\n\nimport type { Ref } from 'vue'\n\nexport interface IStepsProps {\n  active: number\n  dir: string\n  center: boolean\n  finishStatus: string\n  processStatus: string\n  round: string\n}\n\nexport interface StepItemState {\n  uid: number\n  currentStatus: string\n  setIndex: (val: number) => void\n  // calcProgress: (status: string) => void\n}\n\nexport interface IStepsInject {\n  props: IStepsProps\n  steps: Ref<StepItemState[]>\n  addStep: (item: StepItemState) => void\n  removeStep: (uid: number) => void\n}\n\nexport default defineComponent({\n  name: 'Step',\n  components: {\n    HlIcon,\n    SystemChecked,\n    SystemClose,\n  },\n  props: stepProps,\n  setup(props) {\n    const { namespace } = useNamespace('step')\n    const index = ref(-1)\n    const internalStatus = ref('')\n    const parent: IStepsInject = inject('Steps')\n    const currentInstance = getCurrentInstance()\n\n    onMounted(() => {\n      watch(\n        [() => parent.props.active, () => parent.props.processStatus, () => parent.props.finishStatus],\n        ([active]) => {\n          updateStatus(active)\n        },\n        { immediate: true },\n      )\n    })\n\n    onBeforeUnmount(() => {\n      parent.removeStep(stepItemState.uid)\n    })\n\n    const currentStatus = computed(() => {\n      return props.status || internalStatus.value\n    })\n    const prevStatus = computed(() => {\n      const prevStep = parent.steps.value[index.value - 1]\n      return prevStep ? prevStep.currentStatus : 'wait'\n    })\n    const isCenter = computed(() => {\n      return parent.props.center\n    })\n    const isVertical = computed(() => {\n      return parent.props.dir === 'vertical'\n    })\n    const isInline = computed(() => {\n      return parent.props.dir === 'inline'\n    })\n    const stepsCount = computed(() => {\n      return parent.steps.value.length\n    })\n    const isLast = computed(() => {\n      return parent.steps.value[stepsCount.value - 1]?.uid === currentInstance.uid\n    })\n\n    const setIndex = (val: number) => {\n      index.value = val\n    }\n\n    const updateStatus = (activeIndex: number) => {\n      if (activeIndex > index.value) {\n        internalStatus.value = parent.props.finishStatus\n      } else if (activeIndex === index.value && prevStatus.value !== 'error') {\n        internalStatus.value = parent.props.processStatus\n      } else {\n        internalStatus.value = 'wait'\n      }\n    }\n\n    const stepItemState = reactive({\n      uid: currentInstance!.uid,\n      currentStatus,\n      setIndex,\n    })\n    parent.addStep(stepItemState)\n\n    return {\n      namespace,\n      index,\n      currentStatus,\n      isCenter,\n      isVertical,\n      isInline,\n      isLast,\n      parent,\n      setIndex,\n      updateStatus,\n    }\n  },\n})\n</script>\n"],"names":["_toDisplayString","_createCommentVNode"],"mappings":";;;;;;;;;;AA8GA,MAAK,YAAa,gBAAa;AAAA,EAC7B,MAAM;AAAA,EACN,YAAY;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA;AACF,EACA,OAAO;AAAA,EACP,MAAM,OAAO;AACX,UAAM,EAAE,cAAc,aAAa,MAAM;AACzC,UAAM,QAAQ,IAAI,EAAE;AACpB,UAAM,iBAAiB,IAAI,EAAE;AAC7B,UAAM,SAAuB,OAAO,OAAO;AAC3C,UAAM,kBAAkB;AAExB,cAAU,MAAM;AACd,YACE,CAAC,MAAM,OAAO,MAAM,QAAQ,MAAM,OAAO,MAAM,eAAe,MAAM,OAAO,MAAM,YAAY,GAC7F,CAAC,CAAC,YAAY;AACZ,qBAAa,MAAM;AAAA,SAErB,EAAE,WAAW,MACf;AAAA,KACD;AAED,oBAAgB,MAAM;AACpB,aAAO,WAAW,cAAc,GAAG;AAAA,KACpC;AAED,UAAM,gBAAgB,SAAS,MAAM;AACnC,aAAO,MAAM,UAAU,eAAe;AAAA,KACvC;AACD,UAAM,aAAa,SAAS,MAAM;AAChC,YAAM,WAAW,OAAO,MAAM,MAAM,MAAM,QAAQ;AAClD,aAAO,WAAW,SAAS,gBAAgB;AAAA,KAC5C;AACD,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,OAAO,MAAM;AAAA,KACrB;AACD,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,OAAO,MAAM,QAAQ;AAAA,KAC7B;AACD,UAAM,WAAW,SAAS,MAAM;AAC9B,aAAO,OAAO,MAAM,QAAQ;AAAA,KAC7B;AACD,UAAM,aAAa,SAAS,MAAM;AAChC,aAAO,OAAO,MAAM,MAAM;AAAA,KAC3B;AACD,UAAM,SAAS,SAAS,MAAM;AAC5B,aAAO;AAAkE;AAG3E;AACE;AAAc;AAGhB;AACE,UAAI,2BAA2B;AAC7B;AAAoC;AAEpC,sCAA8B,MAAM;AAAA;AAEpC;AAAuB;AACzB;AAGF;AAA+B;AACP,MACtB;AAAA,MACA;AAAA;AAEF;AAEA,WAAO;AAAA;AACL,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA;AACF;AAEJ;;;;;;AAzHQ,gDA1EyB;AAA4F;;AAoC9G;AAdH;AAnBE;;AAAsD,UAAgC,kBAAa;AAAK;;;AAQvG;AAD4D;YAAxC;AAAM;aAEhBA,qBAAa,YAA9B;AAIO,UAHL;AAEU;AAFkC;;AACxB;AAAA;;;;AAOf,UAHL;AAEU;AAFkC;;AAC1B;AAAA;;;;;;AAIA;AACE,0DACG;AAAA;AACgB,+CAAf;AAAK;;;AAEP;AACS;AAAP;;;;AAKpB;UAFwC;AAAM;;AACD;AAAV;;;;AAwClC;AAlCa;AAqBd;AAnBE;;AAA0D,YAAkC,kBAAa;AAAK;;;AAQ7G;AAD4D;cAAxC;AAAM;eAEhBA,qBAAa,YAA9B;AAIO,YAHL;AAEU;AAFkC;;AACxB;AAAA;;;;AAOf,YAHL;AAEU;AAFkC;;AAC1B;AAAA;;;;;;AAIA;;AAGxB,MACAC,mBAOM;AAPgB,wDACG;AAAA;AACgB,6CAAf;AAAK;;;AAIvB;UAFwC;AAAM;;AACD;AAAV;;;;;;;;;;;"}