import { n as normalizeComponent } from "./index.js";
var render$5 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("svg", {
    style: _vm.svgStyle,
    attrs: {
      "viewBox": _vm.viewBox
    }
  }, [_c("rect", {
    style: _vm.rect.style,
    attrs: {
      "clip-path": _vm.rect.clipPath,
      "x": "0",
      "y": "0",
      "width": _vm.width,
      "height": _vm.height
    }
  }), _c("defs", [_c("clipPath", {
    attrs: {
      "id": _vm.clipPathId
    }
  }, [_vm._t("default", function() {
    return [_c("rect", {
      attrs: {
        "x": "0",
        "y": "0",
        "rx": "5",
        "ry": "5",
        "width": _vm.width,
        "height": _vm.height
      }
    })];
  })], 2), _c("linearGradient", {
    attrs: {
      "id": _vm.gradientId
    }
  }, [_c("stop", {
    attrs: {
      "offset": "0%",
      "stop-color": _vm.primaryColor
    }
  }, [_vm.animate ? _c("animate", {
    attrs: {
      "attributeName": "offset",
      "values": "-2; 1",
      "dur": _vm.animateSpeed,
      "repeatCount": _vm.repeatCount
    }
  }) : _vm._e()]), _c("stop", {
    attrs: {
      "offset": "50%",
      "stop-color": _vm.secondaryColor
    }
  }, [_vm.animate ? _c("animate", {
    attrs: {
      "attributeName": "offset",
      "values": "-1.5; 1.5",
      "dur": _vm.animateSpeed,
      "repeatCount": _vm.repeatCount
    }
  }) : _vm._e()]), _c("stop", {
    attrs: {
      "offset": "100%",
      "stop-color": _vm.primaryColor
    }
  }, [_vm.animate ? _c("animate", {
    attrs: {
      "attributeName": "offset",
      "values": "-1; 2",
      "dur": _vm.animateSpeed,
      "repeatCount": _vm.repeatCount
    }
  }) : _vm._e()])], 1)], 1)]);
};
var staticRenderFns$5 = [];
const __vue2_script$5 = {
  name: "g-skeleton",
  props: {
    repeatCount: {
      type: Number,
      default: 10
    },
    width: {
      type: Number,
      default: 400
    },
    height: {
      type: Number,
      default: 120
    },
    primaryColor: {
      type: String,
      default: "#F5F6F7"
    },
    secondaryColor: {
      type: String,
      default: "#EAEDF0"
    },
    rtl: {
      type: Boolean,
      default: false
    },
    speed: {
      type: Number,
      default: 2
    },
    animate: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      uid: 0
    };
  },
  computed: {
    viewBox() {
      return `0 0 ${this.width} ${this.height}`;
    },
    svgStyle() {
      if (this.rtl) {
        return {
          transform: "translateZ(0) rotateY(180deg)"
        };
      }
      return {
        transform: "translateZ(0)"
      };
    },
    gradientId() {
      return `gradient-${this.uid}`;
    },
    clipPathId() {
      return `clipPath-${this.uid}`;
    },
    rect() {
      return {
        style: {
          fill: `url(#${this.gradientId})`
        },
        clipPath: `url(#${this.clipPathId})`
      };
    },
    animateSpeed() {
      return `${this.speed}s`;
    }
  },
  mounted() {
    this.uid = this._uid;
  }
};
const __cssModules$5 = {};
var __component__$5 = /* @__PURE__ */ normalizeComponent(__vue2_script$5, render$5, staticRenderFns$5, false, __vue2_injectStyles$5, null, null, null);
function __vue2_injectStyles$5(context) {
  for (let o in __cssModules$5) {
    this[o] = __cssModules$5[o];
  }
}
var Skeleton = /* @__PURE__ */ function() {
  return __component__$5.exports;
}();
var render$4 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("skeleton", _vm._b({}, "skeleton", _vm.$attrs, false), [_c("rect", {
    attrs: {
      "x": "0",
      "y": "0",
      "rx": "5",
      "ry": "5",
      "width": "70",
      "height": "70"
    }
  }), _c("rect", {
    attrs: {
      "x": "80",
      "y": "17",
      "rx": "4",
      "ry": "4",
      "width": "300",
      "height": "13"
    }
  }), _c("rect", {
    attrs: {
      "x": "80",
      "y": "40",
      "rx": "3",
      "ry": "3",
      "width": "250",
      "height": "10"
    }
  }), _c("rect", {
    attrs: {
      "x": "0",
      "y": "80",
      "rx": "3",
      "ry": "3",
      "width": "350",
      "height": "10"
    }
  }), _c("rect", {
    attrs: {
      "x": "0",
      "y": "100",
      "rx": "3",
      "ry": "3",
      "width": "400",
      "height": "10"
    }
  }), _c("rect", {
    attrs: {
      "x": "0",
      "y": "120",
      "rx": "3",
      "ry": "3",
      "width": "360",
      "height": "10"
    }
  })]);
};
var staticRenderFns$4 = [];
const __vue2_script$4 = {
  components: {
    Skeleton
  }
};
const __cssModules$4 = {};
var __component__$4 = /* @__PURE__ */ normalizeComponent(__vue2_script$4, render$4, staticRenderFns$4, false, __vue2_injectStyles$4, null, null, null);
function __vue2_injectStyles$4(context) {
  for (let o in __cssModules$4) {
    this[o] = __cssModules$4[o];
  }
}
var List = /* @__PURE__ */ function() {
  return __component__$4.exports;
}();
var render$3 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("skeleton", _vm._b({}, "skeleton", _vm.$attrs, false), [_c("rect", {
    attrs: {
      "x": "0",
      "y": "0",
      "rx": "3",
      "ry": "3",
      "width": "66",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "76",
      "y": "0",
      "rx": "3",
      "ry": "3",
      "width": "140",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "18",
      "y": "24",
      "rx": "3",
      "ry": "3",
      "width": "140",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "168",
      "y": "24",
      "rx": "3",
      "ry": "3",
      "width": "174",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "18",
      "y": "48",
      "rx": "3",
      "ry": "3",
      "width": "100",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "128",
      "y": "48",
      "rx": "3",
      "ry": "3",
      "width": "54",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "192",
      "y": "48",
      "rx": "3",
      "ry": "3",
      "width": "74",
      "height": "12"
    }
  }), _c("rect", {
    attrs: {
      "x": "0",
      "y": "72",
      "rx": "3",
      "ry": "3",
      "width": "38",
      "height": "12"
    }
  })]);
};
var staticRenderFns$3 = [];
const __vue2_script$3 = {
  components: {
    Skeleton
  }
};
const __cssModules$3 = {};
var __component__$3 = /* @__PURE__ */ normalizeComponent(__vue2_script$3, render$3, staticRenderFns$3, false, __vue2_injectStyles$3, null, null, null);
function __vue2_injectStyles$3(context) {
  for (let o in __cssModules$3) {
    this[o] = __cssModules$3[o];
  }
}
var Code = /* @__PURE__ */ function() {
  return __component__$3.exports;
}();
var render$2 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("skeleton", _vm._b({
    attrs: {
      "width": 1680,
      "height": _vm.rectHeight * _vm.rows + _vm.margin * (_vm.rows - 1)
    }
  }, "skeleton", _vm.$attrs, false), _vm._l(_vm.clipRect, function(item, index) {
    return _c("rect", {
      key: index,
      attrs: {
        "x": item.x,
        "y": item.y,
        "rx": "4",
        "ry": "4",
        "width": _vm.rectWidth,
        "height": _vm.rectHeight
      }
    });
  }), 0);
};
var staticRenderFns$2 = [];
const __vue2_script$2 = {
  components: {
    Skeleton
  },
  props: {
    rows: {
      type: Number,
      default: 1
    },
    cols: {
      type: Number,
      default: 5
    },
    margin: {
      type: Number,
      default: 24
    }
  },
  computed: {
    rectWidth() {
      return Math.round(312 * 5 / this.cols);
    },
    rectHeight() {
      return Math.round(5 * 558 / this.cols);
    },
    clipRect() {
      const arr = [];
      for (let i = 0; i < this.rows; i++) {
        for (let j = 0; j < this.cols; j++) {
          arr.push({
            x: (this.rectWidth + this.margin) * j,
            y: (this.rectHeight + this.margin) * i
          });
        }
      }
      return arr;
    }
  }
};
const __cssModules$2 = {};
var __component__$2 = /* @__PURE__ */ normalizeComponent(__vue2_script$2, render$2, staticRenderFns$2, false, __vue2_injectStyles$2, null, null, null);
function __vue2_injectStyles$2(context) {
  for (let o in __cssModules$2) {
    this[o] = __cssModules$2[o];
  }
}
var Tpl = /* @__PURE__ */ function() {
  return __component__$2.exports;
}();
var render$1 = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("skeleton", _vm._b({
    attrs: {
      "width": 1680,
      "height": _vm.rectHeight(670) * _vm.rows + _vm.margin * (_vm.rows - 1)
    }
  }, "skeleton", _vm.$attrs, false), [_vm._l(_vm.headerLRect, function(item) {
    return _c("rect", {
      key: item.id,
      attrs: {
        "x": item.x,
        "y": item.y,
        "rx": "4",
        "ry": "4",
        "width": 234 * _vm.ratio,
        "height": 40 * _vm.ratio
      }
    });
  }), _vm._l(_vm.headerRRect, function(item) {
    return _c("rect", {
      key: item.id,
      attrs: {
        "x": item.x,
        "y": item.y,
        "rx": "4",
        "ry": "4",
        "width": 232 * _vm.ratio,
        "height": 28 * _vm.ratio
      }
    });
  }), _vm._l(_vm.bodyRect, function(item) {
    return _c("rect", {
      key: item.id,
      attrs: {
        "x": item.x,
        "y": item.y,
        "rx": "4",
        "ry": "4",
        "width": item.width,
        "height": item.height
      }
    });
  }), _vm._l(_vm.footerRect, function(item) {
    return _c("rect", {
      key: item.id,
      attrs: {
        "x": item.x,
        "y": item.y,
        "rx": "4",
        "ry": "4",
        "width": item.width,
        "height": item.height
      }
    });
  })], 2);
};
var staticRenderFns$1 = [];
const __vue2_script$1 = {
  components: {
    Skeleton
  },
  props: {
    rows: {
      type: Number,
      default: 1
    },
    cols: {
      type: Number,
      default: 5
    },
    margin: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      headerLRect: [],
      headerRRect: [],
      bodyRect: [],
      footerRect: []
    };
  },
  computed: {
    ratio() {
      return 5 / this.cols || 1;
    },
    rectMargin() {
      return Math.round(30 * this.ratio);
    }
  },
  created() {
    this.clipRect();
  },
  methods: {
    rectWidth(width = 312) {
      return Math.round(width * this.ratio);
    },
    rectHeight(height = 558) {
      return Math.round(height * this.ratio);
    },
    clipRect() {
      for (let i = 0; i < this.rows; i++) {
        this.headerLRect.push({
          x: 0,
          y: (670 + this.margin) * i * this.ratio
        });
        this.headerRRect.push({
          x: 1680 - 232 * this.ratio,
          y: (670 + this.margin) * i * this.ratio
        });
        for (let j = 0; j < this.cols; j++) {
          this.bodyRect.push({
            x: (this.rectWidth() + this.rectMargin) * j,
            y: ((670 + this.margin) * i + 68) * this.ratio,
            width: this.rectWidth(),
            height: this.rectHeight()
          });
          this.footerRect.push({
            x: (this.rectWidth() + this.rectMargin) * j,
            y: ((670 + this.margin) * i + 646) * this.ratio,
            width: this.rectWidth(252),
            height: this.rectHeight(25)
          });
        }
      }
    }
  }
};
const __cssModules$1 = {};
var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1, null, null, null);
function __vue2_injectStyles$1(context) {
  for (let o in __cssModules$1) {
    this[o] = __cssModules$1[o];
  }
}
var Tpls = /* @__PURE__ */ function() {
  return __component__$1.exports;
}();
var render = function() {
  var _vm = this;
  var _h = _vm.$createElement;
  var _c = _vm._self._c || _h;
  return _c("skeleton", _vm._b({
    attrs: {
      "width": 1680,
      "height": _vm.height * _vm.rows + (_vm.rows - 1) * _vm.margin
    }
  }, "skeleton", _vm.$attrs, false), _vm._l(_vm.list, function(item, index) {
    return _c("rect", {
      key: index,
      attrs: {
        "x": item.x,
        "y": item.y,
        "rx": "3",
        "ry": "3",
        "width": item.width,
        "height": _vm.height
      }
    });
  }), 0);
};
var staticRenderFns = [];
const __vue2_script = {
  name: "g-skeleton-barrel",
  components: {
    Skeleton
  },
  props: {
    height: {
      type: Number,
      default: 200
    },
    margin: {
      type: Number,
      default: 20
    },
    rows: {
      type: Number,
      default: 3
    }
  },
  computed: {
    list() {
      let x = 0;
      let y = 0;
      let index = 0;
      let diff = 1680;
      const items = [];
      let width;
      while (true) {
        if (diff <= 400) {
          width = diff;
          diff = 0;
          index += 1;
        } else {
          width = Math.max(Math.ceil(400 * Math.random()), 150);
          diff -= width + this.margin;
        }
        items.push({
          x,
          y,
          width
        });
        x += width + this.margin;
        if (diff === 0) {
          if (index === this.rows) {
            return items;
          }
          x = 0;
          y += this.height + this.margin;
          diff = 1680;
        }
      }
    }
  }
};
const __cssModules = {};
var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles, null, null, null);
function __vue2_injectStyles(context) {
  for (let o in __cssModules) {
    this[o] = __cssModules[o];
  }
}
var Barrel = /* @__PURE__ */ function() {
  return __component__.exports;
}();
Skeleton.List = List;
Skeleton.Code = Code;
Skeleton.Tpl = Tpl;
Skeleton.Tpls = Tpls;
Skeleton.Barrel = Barrel;
export { Skeleton as S };
