@ccos/webos-vue/dist/es/index17.mjs

A Web-Ui Framework for Skyworth/Coocaa TV

import { toRef, ref, reactive, onMounted, onBeforeUnmount, watch, openBlock, createElementBlock, normalizeStyle, unref, createElementVNode, withDirectives, vShow, toDisplayString, Fragment, pushScopeId, popScopeId } from "vue";
import { cardProps, useCard } from "./index49.mjs";
import { getNumber, px2vw, css2px } from "./index45.mjs";
import "./index52.mjs";
import _export_sfc from "./index34.mjs";
const _withScopeId = (n) => (pushScopeId("data-v-928e0a39"), n = n(), popScopeId(), n);
const _hoisted_1 = ["src"];
const _hoisted_2 = /* @__PURE__ */ _withScopeId(() => /* @__PURE__ */ createElementVNode("div", { class: "card-with-title-gap" }, null, -1));
const _sfc_main = {
  __name: "card-with-title",
  props: {
    ...cardProps,
    //
    imageWidth: {
      type: Number,
      required: false,
      default: 0
    },
    imageHeight: {
      type: Number,
      required: false,
      default: 0
    },
    imgUrl: {
      // 图片地址
      type: String,
      required: false,
      default: ""
    },
    align: {
      // 对齐方式： 接受两个值：left 和 center (默认)
      type: String,
      required: false,
      default: ""
    },
    line: {
      // 行数，只接受数字 1 和 2
      type: Number,
      required: false,
      default: 0
    },
    titleCustomStyle: {
      // 自定义 title 的其他样式
      type: Object,
      required: false,
      default: null
    },
    subTitleCustomStyle: {
      // 自定义 sub-title 的其他样式
      type: Object,
      required: false,
      default: null
    }
  },
  setup(__props) {
    const props = __props;
    const width = toRef(props, "width");
    const height = toRef(props, "height");
    const title = toRef(props, "title");
    const subTitle = toRef(props, "subTitle");
    const imgUrl = toRef(props, "imgUrl");
    const align = toRef(props, "align");
    const imageWidth = toRef(props, "imageWidth");
    const imageHeight = toRef(props, "imageHeight");
    const line = toRef(props, "line");
    const titleCustomStyle = toRef(props, "titleCustomStyle");
    const subTitleCustomStyle = toRef(props, "subTitleCustomStyle");
    const {
      cardRef,
      cardStyle,
      cardDesignWidth,
      cardDesignHeight,
      updateLayout
    } = useCard();
    const onlyOneTitle = ref(true);
    const titleStyle = reactive({});
    const subTitleStyle = reactive({});
    const showImage = ref(false);
    const imgWrapStyle = reactive({});
    const imageStyle = reactive({});
    const imageRealUrl = ref("");
    let gapOfImageAndText = 12;
    let mainTitleHeightPx = 52;
    let subTitleHeightPx = 52;
    const updateLayoutCallBack = () => {
      let imgW;
      let imgH;
      if (onlyOneTitle.value) {
        imgW = cardDesignWidth.value;
        imgH = cardDesignHeight.value - gapOfImageAndText - mainTitleHeightPx;
      } else {
        imgW = cardDesignWidth.value;
        imgH = cardDesignHeight.value - gapOfImageAndText - mainTitleHeightPx - subTitleHeightPx;
      }
      imgWrapStyle["width"] = String(px2vw(imgW)) + "vw";
      imgWrapStyle["height"] = String(px2vw(imgH)) + "vw";
      imageStyle["width"] = String(px2vw(imgW)) + "vw";
      imageStyle["height"] = String(px2vw(imgH)) + "vw";
    };
    const updateCardLayout = (newProps, callback) => {
      if (Number(newProps.line) == 2) {
        onlyOneTitle.value = false;
      } else if (Number(newProps.line) == 1) {
        onlyOneTitle.value = true;
      } else {
        if (newProps.title && newProps.subTitle) {
          onlyOneTitle.value = false;
        } else {
          onlyOneTitle.value = true;
        }
      }
      Object.assign(titleStyle, {});
      Object.assign(subTitleStyle, {});
      if (newProps.align == "center") {
        titleStyle["text-align"] = "center";
        subTitleStyle["text-align"] = "center";
      } else {
        titleStyle["text-align"] = "left";
        subTitleStyle["text-align"] = "left";
      }
      if (newProps.imgUrl) {
        showImage.value = true;
      } else {
        showImage.value = false;
      }
      if (newProps.titleCustomStyle) {
        assignCustomMainTitleSytle(newProps.titleCustomStyle);
      } else {
        if (onlyOneTitle.value) {
          mainTitleHeightPx = 52;
        } else {
          mainTitleHeightPx = 62;
        }
      }
      if (newProps.subTitleCustomStyle) {
        assignCustomSubTitleSytle(newProps.subTitleCustomStyle);
      } else {
        subTitleHeightPx = 52;
      }
      if (newProps.imageWidth && newProps.imageHeight) {
        let W = newProps.imageWidth;
        let H = newProps.imageHeight;
        if (onlyOneTitle.value) {
          H += gapOfImageAndText + mainTitleHeightPx;
        } else {
          H += gapOfImageAndText + mainTitleHeightPx + subTitleHeightPx;
        }
        updateLayout(W, H, callback);
      } else if (newProps.width && newProps.height) {
        updateLayout(newProps.width, newProps.height, callback);
      } else {
        updateLayout(0, 0, callback);
      }
      imageRealUrl.value = newProps.imgUrl;
    };
    const assignCustomMainTitleSytle = (styleObj) => {
      let customHeight = null;
      for (let key in styleObj) {
        if (styleObj.hasOwnProperty(key)) {
          const value = styleObj[key];
          if (key == "height") {
            customHeight = value;
          }
          const number = getNumber(value);
          if ((value.endsWith("px") || value.endsWith("px;")) && number > 1) {
            titleStyle[key] = String(px2vw(css2px(value))) + "vw";
          } else {
            titleStyle[key] = value;
          }
        }
      }
      if (customHeight) {
        mainTitleHeightPx = css2px(customHeight);
      }
    };
    const assignCustomSubTitleSytle = (styleObj) => {
      let customHeight = null;
      for (let key in styleObj) {
        if (styleObj.hasOwnProperty(key)) {
          const value = styleObj[key];
          if (key == "height") {
            customHeight = value;
          }
          const number = getNumber(value);
          if ((value.endsWith("px") || value.endsWith("px;")) && number > 1) {
            subTitleStyle[key] = String(px2vw(css2px(value))) + "vw";
          } else {
            subTitleStyle[key] = value;
          }
        }
      }
      if (customHeight) {
        subTitleHeightPx = css2px(customHeight);
      }
    };
    onMounted(() => {
    });
    onBeforeUnmount(() => {
    });
    watch(
      () => [
        props.width,
        props.height,
        props.title,
        props.subTitle,
        props.imageWidth,
        props.imageHeight,
        props.imgUrl,
        props.align,
        props.line,
        props.titleCustomStyle,
        props.subTitleCustomStyle
      ],
      (newVal) => {
        updateCardLayout({
          width: newVal[0] ?? 0,
          height: newVal[1] ?? 0,
          title: newVal[2] ?? "",
          subTitle: newVal[3] ?? "",
          imageWidth: newVal[4] ?? 0,
          imageHeight: newVal[5] ?? 0,
          imgUrl: newVal[6] ?? "",
          align: newVal[7] ?? "",
          line: newVal[8] ?? 0,
          titleCustomStyle: newVal[9] ?? null,
          subTitleCustomStyle: newVal[10] ?? null
        }, updateLayoutCallBack);
      }
    );
    updateCardLayout({
      width: width.value ?? 0,
      height: height.value ?? 0,
      title: title.value ?? "",
      subTitle: subTitle.value ?? "",
      imageWidth: imageWidth.value ?? 0,
      imageHeight: imageHeight.value ?? 0,
      imgUrl: imgUrl.value ?? "",
      align: align.value ?? "",
      line: line.value ?? 0,
      titleCustomStyle: titleCustomStyle.value ?? null,
      subTitleCustomStyle: subTitleCustomStyle.value ?? null
    }, updateLayoutCallBack);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        ref_key: "cardRef",
        ref: cardRef,
        style: normalizeStyle(unref(cardStyle)),
        class: "card-with-title"
      }, [
        createElementVNode("div", {
          style: normalizeStyle(imgWrapStyle)
        }, [
          withDirectives(createElementVNode("img", {
            style: normalizeStyle(imageStyle),
            src: imageRealUrl.value
          }, null, 12, _hoisted_1), [
            [vShow, showImage.value]
          ])
        ], 4),
        _hoisted_2,
        onlyOneTitle.value ? (openBlock(), createElementBlock("div", {
          key: 0,
          class: "card-with-one-title-title1",
          style: normalizeStyle(titleStyle)
        }, toDisplayString(title.value), 5)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
          createElementVNode("div", {
            class: "card-with-two-title-title1",
            style: normalizeStyle(titleStyle)
          }, toDisplayString(title.value), 5),
          createElementVNode("div", {
            class: "card-with-two-title-title2",
            style: normalizeStyle(subTitleStyle)
          }, toDisplayString(subTitle.value), 5)
        ], 64))
      ], 4);
    };
  }
};
const TvCardWithTitle = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-928e0a39"]]);
export {
  TvCardWithTitle as default
};