"use strict";
const vue = require("vue");
const useDefaults = require("./useDefaults-YXpmugKp.js");
const useRadiusElementClasses = require("./useRadiusElementClasses-Dg5jsuJw.js");
const object = require("./object-DlOVrM-t.js");
const index = require("./index-JJEBhaXq.js");
const _sfc_main = /* @__PURE__ */ vue.defineComponent({
  __name: "BImg",
  props: {
    blank: { type: Boolean, default: false },
    blankColor: { default: "transparent" },
    block: { type: Boolean, default: false },
    fluid: { type: Boolean, default: false },
    fluidGrow: { type: Boolean, default: false },
    height: { default: void 0 },
    tag: { default: "img" },
    lazy: { type: Boolean, default: false },
    sizes: { default: void 0 },
    src: { default: void 0 },
    srcset: { default: void 0 },
    thumbnail: { type: Boolean, default: false },
    width: { default: void 0 },
    placement: { default: void 0 },
    rounded: { type: [Boolean, String, Number], default: false },
    roundedTop: { type: [Boolean, String, Number], default: void 0 },
    roundedBottom: { type: [Boolean, String, Number], default: void 0 },
    roundedStart: { type: [Boolean, String, Number], default: void 0 },
    roundedEnd: { type: [Boolean, String, Number], default: void 0 }
  },
  setup(__props) {
    const _props = __props;
    const props = useDefaults.useDefaults(_props, "BImg");
    const heightNumber = index.useToNumber(() => props.height ?? Number.NaN);
    const widthNumber = index.useToNumber(() => props.width ?? Number.NaN);
    const radiusElementClasses = useRadiusElementClasses.useRadiusElementClasses(() => ({
      rounded: props.rounded,
      roundedTop: props.roundedTop,
      roundedBottom: props.roundedBottom,
      roundedStart: props.roundedStart,
      roundedEnd: props.roundedEnd
    }));
    const computedSrcset = vue.computed(
      () => typeof props.srcset === "string" ? props.srcset.split(",").filter((x) => x).join(",") : object.isReadOnlyArray(props.srcset) ? props.srcset.filter((x) => x).join(",") : void 0
    );
    const computedSizes = vue.computed(
      () => typeof props.sizes === "string" ? props.sizes.split(",").filter((x) => x).join(",") : object.isReadOnlyArray(props.sizes) ? props.sizes.filter((x) => x).join(",") : void 0
    );
    const computedDimentions = vue.computed(() => {
      const width = Number.isNaN(widthNumber.value) ? void 0 : widthNumber.value;
      const height = Number.isNaN(heightNumber.value) ? void 0 : heightNumber.value;
      if (props.blank) {
        if (width !== void 0 && height === void 0) return { height: width, width };
        if (width === void 0 && height !== void 0) return { height, width: height };
        if (width === void 0 && height === void 0) return { height: 1, width: 1 };
      }
      return {
        width,
        height
      };
    });
    const computedBlankImgSrc = vue.computed(
      () => makeBlankImgSrc(computedDimentions.value.width, computedDimentions.value.height, props.blankColor)
    );
    const computedAlignment = vue.computed(() => ({
      "float-start": props.placement === "start",
      "float-end": props.placement === "end",
      "mx-auto": props.placement === "center"
    }));
    const computedClasses = vue.computed(() => [
      radiusElementClasses.value,
      computedAlignment.value,
      {
        "img-thumbnail": props.thumbnail,
        "img-fluid": props.fluid || props.fluidGrow,
        "w-100": props.fluidGrow,
        "d-block": props.block || props.placement === "center"
      }
    ]);
    const makeBlankImgSrc = (width, height, color) => `data:image/svg+xml;charset=UTF-8,${encodeURIComponent(`<svg width="${width}" height="${height}" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}" preserveAspectRatio="none">
    <rect width="100%" height="100%" style="fill:${color};"></rect>
    </svg>`)}`;
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(vue.unref(props).tag), {
        class: vue.normalizeClass([computedClasses.value, "b-img"]),
        src: !vue.unref(props).blank ? vue.unref(props).src : computedBlankImgSrc.value,
        width: computedDimentions.value.width || void 0,
        height: computedDimentions.value.height || void 0,
        srcset: !vue.unref(props).blank ? computedSrcset.value : void 0,
        sizes: !vue.unref(props).blank ? computedSizes.value : void 0,
        loading: vue.unref(props).lazy ? "lazy" : "eager"
      }, null, 8, ["class", "src", "width", "height", "srcset", "sizes", "loading"]);
    };
  }
});
exports._sfc_main = _sfc_main;
//# sourceMappingURL=BImg.vue_vue_type_script_setup_true_lang-3FYrkHVf.js.map
