@ccos/webos-vue/dist/lib/index15.js

A Web-Ui Framework for Skyworth/Coocaa TV

"use strict";
Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: "Module" } });
const vue = require("vue");
const useCard = require("./index49.js");
const common = require("./index45.js");
require("./index50.js");
const _pluginVue_exportHelper = require("./index34.js");
const _hoisted_1 = {
  key: 0,
  class: "left-right-struct-left-margin-part"
};
const _hoisted_2 = {
  key: 1,
  class: "left-right-struct-iconpart"
};
const _hoisted_3 = ["src"];
const _hoisted_4 = {
  key: 2,
  class: "left-right-struct-text-left-margin-part"
};
const _hoisted_5 = ["src"];
const _sfc_main = {
  __name: "cardtext",
  props: {
    ...useCard.cardProps,
    //
    icon: {
      // icon
      type: String,
      required: false,
      default: ""
    },
    imgUrl: {
      // 图片地址
      type: String,
      required: false,
      default: ""
    },
    align: {
      // 对齐方式：接受两个值：left 和 center (默认)
      type: String,
      required: false,
      default: ""
    }
  },
  setup(__props) {
    const props = __props;
    const width = vue.toRef(props, "width");
    const height = vue.toRef(props, "height");
    const title = vue.toRef(props, "title");
    const subTitle = vue.toRef(props, "subTitle");
    const icon = vue.toRef(props, "icon");
    const imgUrl = vue.toRef(props, "imgUrl");
    const align = vue.toRef(props, "align");
    const {
      cardRef,
      cardStyle,
      cardDesignWidth,
      cardDesignHeight,
      updateLayout
    } = useCard.useCard();
    const isUpDownStruct = vue.ref(false);
    const isLeftRightStruct = vue.ref(false);
    const leftRightStructStyle = vue.reactive({});
    const leftRightStructTextAreaStyle = vue.reactive({});
    const leftRightStructTextMain = vue.reactive({});
    const leftRightStructTextSub = vue.reactive({});
    const hasIconOrImage = vue.ref(false);
    const alignLeft = vue.ref(false);
    const useImage = vue.ref(false);
    const upDownStructStyle = vue.reactive({});
    const upDownStructIconPartStyle = vue.reactive({});
    const upDownStructGapStyle = vue.reactive({});
    const upDownStructTitleStyle = vue.reactive({});
    const upDownStructSubTitleStyle = vue.reactive({});
    const upDownStructIconImageStyle = vue.reactive({});
    vue.ref(null);
    const updateLayoutCallBack = () => {
      console.log("updateLayoutCallBack cardDesignWidth = " + cardDesignWidth.value);
      if (cardDesignWidth.value <= 320) {
        updateLeftRightStructStyle();
        isUpDownStruct.value = false;
        isLeftRightStruct.value = true;
      } else {
        updateUpDownStructStyle();
        isUpDownStruct.value = true;
        isLeftRightStruct.value = false;
      }
    };
    const updateLeftRightStructStyle = () => {
      let designW = cardDesignWidth.value;
      let designH = designW * 9 / 16;
      cardStyle["height"] = "" + common.px2vw(designH) + "vw";
      let contentH = designH > 80 ? 80 : designH;
      leftRightStructStyle["height"] = "" + common.px2vw(contentH) + "vw";
      let contentW = designW;
      leftRightStructStyle["width"] = "" + common.px2vw(contentW) + "vw";
      cardStyle["display"] = "flex";
      cardStyle["align-items"] = "center";
      cardStyle["justify-content"] = "left";
      if (icon.value || imgUrl.value) {
        alignLeft.value = false;
        if (imgUrl.value) {
          useImage.value = true;
        } else {
          useImage.value = false;
        }
        let textAreaW = contentW - 28 - 80 - 16;
        if (textAreaW < 0)
          textAreaW = 0;
        leftRightStructTextAreaStyle["width"] = "" + common.px2vw(textAreaW) + "vw";
        leftRightStructTextAreaStyle["height"] = "" + common.px2vw(contentH) + "vw";
        leftRightStructTextAreaStyle["display"] = "inline-block";
        leftRightStructTextAreaStyle["vertical-align"] = "top";
        leftRightStructTextMain["width"] = "" + common.px2vw(textAreaW) + "vw";
        leftRightStructTextMain["height"] = "" + common.px2vw(44) + "vw";
        leftRightStructTextSub["width"] = "" + common.px2vw(textAreaW) + "vw";
        leftRightStructTextSub["height"] = "" + common.px2vw(38) + "vw";
        hasIconOrImage.value = true;
      } else {
        let textAreaW;
        if (align.value && align.value.toString().toLowerCase() == "left") {
          alignLeft.value = true;
          textAreaW = contentW - 28;
          if (textAreaW < 0)
            textAreaW = 0;
          leftRightStructTextMain["text-align"] = "left";
          leftRightStructTextSub["text-align"] = "left";
        } else {
          alignLeft.value = false;
          textAreaW = contentW;
          leftRightStructTextMain["text-align"] = "center";
          leftRightStructTextSub["text-align"] = "center";
        }
        leftRightStructTextAreaStyle["width"] = "" + common.px2vw(textAreaW) + "vw";
        leftRightStructTextAreaStyle["height"] = "" + common.px2vw(contentH) + "vw";
        leftRightStructTextAreaStyle["display"] = "inline-block";
        leftRightStructTextAreaStyle["vertical-align"] = "top";
        leftRightStructTextMain["width"] = "" + common.px2vw(textAreaW) + "vw";
        leftRightStructTextMain["height"] = "" + common.px2vw(44) + "vw";
        leftRightStructTextSub["width"] = "" + common.px2vw(textAreaW) + "vw";
        leftRightStructTextSub["height"] = "" + common.px2vw(38) + "vw";
        hasIconOrImage.value = false;
      }
    };
    const updateUpDownStructStyle = () => {
      let designH = cardDesignHeight.value;
      cardStyle["display"] = "flex";
      cardStyle["align-items"] = "center";
      cardStyle["justify-content"] = "left";
      if (imgUrl.value) {
        useImage.value = true;
      } else {
        useImage.value = false;
      }
      let iconH;
      let gapH;
      let titleH;
      let subTitleH;
      let allContentH;
      let titleFontSize;
      let subTitleFontSize;
      if (designH < 230) {
        iconH = 64;
        gapH = 12;
        titleH = 44;
        subTitleH = 38;
        allContentH = 158;
        titleFontSize = 28;
        subTitleFontSize = 24;
      } else if (designH < 310) {
        iconH = 80;
        gapH = 16;
        titleH = 50;
        subTitleH = 40;
        allContentH = 186;
        titleFontSize = 32;
        subTitleFontSize = 26;
      } else {
        iconH = 120;
        gapH = 40;
        titleH = 50;
        subTitleH = 40;
        allContentH = 250;
        titleFontSize = 32;
        subTitleFontSize = 26;
      }
      upDownStructStyle["width"] = "100%";
      upDownStructStyle["height"] = "" + common.px2vw(allContentH) + "vw";
      upDownStructIconPartStyle["width"] = "100%";
      upDownStructIconPartStyle["height"] = "" + common.px2vw(iconH) + "vw";
      upDownStructIconPartStyle["text-align"] = "center";
      upDownStructIconImageStyle["width"] = "" + common.px2vw(iconH) + "vw";
      upDownStructIconImageStyle["height"] = "" + common.px2vw(iconH) + "vw";
      upDownStructGapStyle["width"] = "100%";
      upDownStructGapStyle["height"] = "" + common.px2vw(gapH) + "vw";
      upDownStructTitleStyle["width"] = "100%";
      upDownStructTitleStyle["height"] = "" + common.px2vw(titleH) + "vw";
      upDownStructTitleStyle["line-height"] = "" + common.px2vw(titleH) + "vw";
      upDownStructTitleStyle["font-size"] = "" + common.px2vw(titleFontSize) + "vw";
      upDownStructTitleStyle["text-align"] = "center";
      upDownStructSubTitleStyle["width"] = "100%";
      upDownStructSubTitleStyle["height"] = "" + common.px2vw(subTitleH) + "vw";
      upDownStructSubTitleStyle["line-height"] = "" + common.px2vw(subTitleH) + "vw";
      upDownStructSubTitleStyle["font-size"] = "" + common.px2vw(subTitleFontSize) + "vw";
      upDownStructSubTitleStyle["text-align"] = "center";
    };
    vue.onMounted(() => {
    });
    vue.onBeforeUnmount(() => {
    });
    updateLayout(width.value, height.value, updateLayoutCallBack);
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createElementBlock("div", {
        ref_key: "cardRef",
        ref: cardRef,
        style: vue.normalizeStyle(vue.unref(cardStyle)),
        class: "card-text-component"
      }, [
        isLeftRightStruct.value ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 0,
          style: vue.normalizeStyle(leftRightStructStyle),
          class: "left-right-struct"
        }, [
          hasIconOrImage.value || alignLeft.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1)) : vue.createCommentVNode("", true),
          hasIconOrImage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
            useImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
              key: 0,
              src: imgUrl.value,
              class: "left-right-struct-iconpart-image"
            }, null, 8, _hoisted_3)) : vue.createCommentVNode("", true)
          ])) : vue.createCommentVNode("", true),
          hasIconOrImage.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4)) : vue.createCommentVNode("", true),
          vue.createElementVNode("div", {
            style: vue.normalizeStyle(leftRightStructTextAreaStyle)
          }, [
            vue.createElementVNode("div", {
              style: vue.normalizeStyle(leftRightStructTextMain),
              class: "title-main"
            }, vue.toDisplayString(title.value), 5),
            vue.createElementVNode("div", {
              style: vue.normalizeStyle(leftRightStructTextSub),
              class: "title-sub"
            }, vue.toDisplayString(subTitle.value), 5)
          ], 4)
        ], 4)) : vue.createCommentVNode("", true),
        isUpDownStruct.value ? (vue.openBlock(), vue.createElementBlock("div", {
          key: 1,
          style: vue.normalizeStyle(upDownStructStyle),
          class: "up-down-struct"
        }, [
          vue.createElementVNode("div", {
            style: vue.normalizeStyle(upDownStructIconPartStyle),
            class: "up-down-struct-iconpart"
          }, [
            useImage.value ? (vue.openBlock(), vue.createElementBlock("img", {
              key: 0,
              src: imgUrl.value,
              style: vue.normalizeStyle(upDownStructIconImageStyle)
            }, null, 12, _hoisted_5)) : vue.createCommentVNode("", true)
          ], 4),
          vue.createElementVNode("div", {
            style: vue.normalizeStyle(upDownStructGapStyle)
          }, null, 4),
          vue.createElementVNode("div", {
            style: vue.normalizeStyle(upDownStructTitleStyle),
            class: "title-main"
          }, vue.toDisplayString(title.value), 5),
          vue.createElementVNode("div", {
            style: vue.normalizeStyle(upDownStructSubTitleStyle),
            class: "title-sub"
          }, vue.toDisplayString(subTitle.value), 5)
        ], 4)) : vue.createCommentVNode("", true)
      ], 4);
    };
  }
};
const TvCardText = /* @__PURE__ */ _pluginVue_exportHelper.default(_sfc_main, [["__scopeId", "data-v-c32727a2"]]);
exports.default = TvCardText;