Loading.mjs 1.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
  1. import { createVNode as _createVNode } from "vue";
  2. import { computed, defineComponent } from "vue";
  3. import { extend, addUnit, numericProp, getSizeStyle, makeStringProp, createNamespace } from "../utils/index.mjs";
  4. const [name, bem] = createNamespace("loading");
  5. const SpinIcon = Array(12).fill(null).map((_, index) => _createVNode("i", {
  6. "class": bem("line", String(index + 1))
  7. }, null));
  8. const CircularIcon = _createVNode("svg", {
  9. "class": bem("circular"),
  10. "viewBox": "25 25 50 50"
  11. }, [_createVNode("circle", {
  12. "cx": "50",
  13. "cy": "50",
  14. "r": "20",
  15. "fill": "none"
  16. }, null)]);
  17. const loadingProps = {
  18. size: numericProp,
  19. type: makeStringProp("circular"),
  20. color: String,
  21. vertical: Boolean,
  22. textSize: numericProp,
  23. textColor: String
  24. };
  25. var stdin_default = defineComponent({
  26. name,
  27. props: loadingProps,
  28. setup(props, {
  29. slots
  30. }) {
  31. const spinnerStyle = computed(() => extend({
  32. color: props.color
  33. }, getSizeStyle(props.size)));
  34. const renderText = () => {
  35. var _a;
  36. if (slots.default) {
  37. return _createVNode("span", {
  38. "class": bem("text"),
  39. "style": {
  40. fontSize: addUnit(props.textSize),
  41. color: (_a = props.textColor) != null ? _a : props.color
  42. }
  43. }, [slots.default()]);
  44. }
  45. };
  46. return () => {
  47. const {
  48. type,
  49. vertical
  50. } = props;
  51. return _createVNode("div", {
  52. "class": bem([type, {
  53. vertical
  54. }]),
  55. "aria-live": "polite",
  56. "aria-busy": true
  57. }, [_createVNode("span", {
  58. "class": bem("spinner", type),
  59. "style": spinnerStyle.value
  60. }, [type === "spinner" ? SpinIcon : CircularIcon]), renderText()]);
  61. };
  62. }
  63. });
  64. export {
  65. stdin_default as default
  66. };