ivue-material-plus/dist/unplugin-vue-components/es/components/ivue-loading-bar/index2.mjs.map

A high quality UI components Library with Vue.js

{"version":3,"file":"index2.mjs","sources":["../../../../../src/components/ivue-loading-bar/index.vue"],"sourcesContent":["<template>\r\n  <transition :name=\"`${prefixCls}-fade`\">\r\n    <div :class=\"prefixCls\" :style=\"outerStyles\" v-show=\"data.visible\">\r\n      <div :class=\"innerClasses\" :style=\"styles\"></div>\r\n    </div>\r\n  </transition>\r\n</template>\r\n\r\n<script lang=\"ts\">\r\nimport { defineComponent, computed, reactive } from 'vue';\r\n\r\n// type\r\nimport type { Props, Data } from './types/index';\r\n\r\nconst prefixCls = 'ivue-loading-bar';\r\n\r\nexport default defineComponent({\r\n  name: prefixCls,\r\n  props: {\r\n    /**\r\n     * 颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    color: {\r\n      type: String,\r\n      default: 'primary',\r\n    },\r\n    /**\r\n     * 错误颜色\r\n     *\r\n     * @type {String}\r\n     */\r\n    failedColor: {\r\n      type: String,\r\n      default: 'error',\r\n    },\r\n    /**\r\n     * 进度条高度\r\n     *\r\n     * @type {Number}\r\n     */\r\n    height: {\r\n      type: Number,\r\n      default: 2,\r\n    },\r\n  },\r\n  setup(props: Props) {\r\n    // data\r\n    const data = reactive<Data>({\r\n      /**\r\n       * 百分比\r\n       *\r\n       * @type {Number}\r\n       */\r\n      percent: 0,\r\n      /**\r\n       * 状态\r\n       *\r\n       * @type {String}\r\n       */\r\n      status: 'success',\r\n      /**\r\n       * 显示\r\n       *\r\n       * @type {Boolean}\r\n       */\r\n      visible: true,\r\n    });\r\n\r\n    // computed\r\n\r\n    // 内容样式\r\n    const innerClasses = computed(() => {\r\n      return [\r\n        `${prefixCls}-inner`,\r\n        {\r\n          [`${prefixCls}-inner-color-primary`]:\r\n            props.color === 'primary' && data.status === 'success',\r\n          [`${prefixCls}-inner-color-error`]:\r\n            props.failedColor === 'error' && data.status === 'error',\r\n        },\r\n      ];\r\n    });\r\n\r\n    // 外层样式\r\n    const outerStyles = computed(() => {\r\n      return {\r\n        height: `${props.height}px`,\r\n      };\r\n    });\r\n\r\n    // styles\r\n    const styles = computed(() => {\r\n      const style = {\r\n        width: `${data.percent}%`,\r\n        height: `${props.height}px`,\r\n        backgroundColor: '',\r\n      };\r\n\r\n      if (props.color !== 'primary' && data.status === 'success') {\r\n        style.backgroundColor = props.color;\r\n      }\r\n\r\n      if (props.failedColor !== 'error' && data.status === 'error') {\r\n        style.backgroundColor = props.failedColor;\r\n      }\r\n\r\n      return style;\r\n    });\r\n\r\n    return {\r\n      prefixCls,\r\n\r\n      // data\r\n      data,\r\n\r\n      // computed\r\n      innerClasses,\r\n      outerStyles,\r\n      styles,\r\n    };\r\n  },\r\n});\r\n</script>\r\n"],"names":["_openBlock","_createBlock","_Transition","_withCtx","_withDirectives","_createElementVNode","_normalizeClass","_normalizeStyle"],"mappings":";;;;AACmB,SAAA,YAAK,IAAS,EAAA,MAAA,EAAA,MAAA,EAAA,MAAA,EAAA,OAAA,QAAA,EAAA;EAA/B,OAAAA,SAAA,EAIa,EAAAC,WAAA,CAAAC,UAAA,EAAA;AAAA,IAAA,IAAA,EAAA,GAAA,IAAA,CAAA,SAAA,CAAA,KAAA,CAAA;AAAA;;IAHA,OAAA,EAAAC,QAAA,MAAA;AAAA,MAAAC,cAAA,CAAmBC,mBAAE,KAAW,EAAA;AAAA,QAAA,KAAA,EAAAC,cAAA,CAAA,IAAA,CAAA,SAAA,CAAA;AAAA,QACzC,KAAA,EAAiDC,cAAA,CAAA,IAAA,CAAA,WAAA,CAAA;AAAA,OAAA,EAAA;AAAA,2BAAhB,KAAE,EAAA;AAAA,UAAA,KAAA,EAAAD,cAAA,CAAA,IAAA,CAAA,YAAA,CAAA;AAAA;iBADgB,CAAY,CAAA;AAAA,OAAA,EAAA,CAAA,CAAA,EAAA;AAAA;;;;;;;;;;"}