@ibiz-template/vue3-components 0.2.7 → 0.2.9

package/es/panel-component/single-data-container/single-data-container.controller.mjs

@@ -1,5 +1,5 @@
 import { ModelError, RuntimeModelError, RuntimeError } from '@ibiz-template/core';
-import { PanelItemController, getPanelItemProvider, isDataContainer, PanelNotifyState, execDELogicById } from '@ibiz-template/runtime';
+import { PanelItemController, getPanelItemProvider, isDataContainer, getAllPanelField, PanelData, PanelNotifyState, execDELogicById } from '@ibiz-template/runtime';
 import { SingleDataContainerState } from './single-data-container.state.mjs';
 
 "use strict";
@@ -146,7 +146,8 @@ class SingleDataContainerController extends PanelItemController {
    * @param {IData[]} items
    */
   async setData(data) {
-    this.state.data = data;
+    const fields = getAllPanelField(this.model);
+    this.state.data = new PanelData(fields, data);
     this.childrenStateNotify(PanelNotifyState.LOAD);
   }
   /**
@@ -239,6 +240,18 @@ class SingleDataContainerController extends PanelItemController {
       updateData();
     });
   }
+  /**
+   * 通知所有子面板成员面板操作过程中的数据变更
+   *
+   * @author lxm
+   * @date 2022-09-20 18:09:40
+   * @param {string[]} names
+   */
+  childDataChangeNotify(names) {
+    Object.values(this.panelItems).forEach((panelItem) => {
+      panelItem.dataChangeNotify(names);
+    });
+  }
   /**
    * 设置面板数据的值
    *
@@ -250,7 +263,7 @@ class SingleDataContainerController extends PanelItemController {
       return;
     }
     this.state.data[name] = value;
-    this.dataChangeNotify([name]);
+    this.childDataChangeNotify([name]);
   }
 }
 

package/es/view-engine/login-view.engine.d.ts

@@ -4,7 +4,9 @@ export declare class LoginViewEngine extends ViewEngineBase {
     route: RouteLocationNormalizedLoaded;
     get AppLoginView(): ViewController;
     onMounted(): Promise<void>;
+    onDestroyed(): Promise<void>;
     call(key: string, args?: IData): Promise<IData | null | undefined>;
     login(args: IData): Promise<void>;
     cancelChanges(): Promise<void>;
+    private enterKeyListener;
 }

package/es/view-engine/login-view.engine.mjs

@@ -12,6 +12,20 @@ class LoginViewEngine extends ViewEngineBase {
   constructor() {
     super(...arguments);
     __publicField(this, "route", useRoute());
+    __publicField(this, "enterKeyListener", async (event) => {
+      if (event.key === "Enter" && this.AppLoginView.layoutPanel) {
+        const args = {
+          data: [
+            {
+              isRemember: this.AppLoginView.layoutPanel.data.isRemember,
+              username: this.AppLoginView.layoutPanel.data.username,
+              password: this.AppLoginView.layoutPanel.data.password
+            }
+          ]
+        };
+        await this.login(args);
+      }
+    });
   }
   get AppLoginView() {
     return this.view.getController("AppLoginView");
@@ -31,6 +45,11 @@ class LoginViewEngine extends ViewEngineBase {
         );
       }
     }
+    document.addEventListener("keydown", this.enterKeyListener);
+  }
+  async onDestroyed() {
+    super.onDestroyed();
+    document.removeEventListener("keydown", this.enterKeyListener);
   }
   async call(key, args = {}) {
     if (key === SysUIActionTag.LOGIN) {

package/lib/common/data-import/data-import.cjs

@@ -0,0 +1,149 @@
+'use strict';
+
+var vue = require('vue');
+var vue3Util = require('@ibiz-template/vue3-util');
+require('./data-import.css');
+var runtime = require('@ibiz-template/runtime');
+
+"use strict";
+const DataImport = /* @__PURE__ */ vue.defineComponent({
+  name: "DataImport",
+  props: {
+    dismiss: {
+      type: Function,
+      required: true
+    },
+    appDataEntity: {
+      type: Object,
+      required: true
+    }
+  },
+  setup(props) {
+    const ns = vue3Util.useNamespace("data-import");
+    const inputUpLoad = vue.ref();
+    const message = vue.ref({
+      state: "ready",
+      message: ""
+    });
+    const isLoading = vue.ref(false);
+    const onFileChange = async ($event) => {
+      const obj = $event.target;
+      if (!obj.files) {
+        return;
+      }
+      const selectedFile = obj.files[0];
+      obj.value = null;
+      let result;
+      isLoading.value = true;
+      try {
+        if (ibiz.env.enableMqtt) {
+          result = await runtime.asyncImportData(selectedFile, props.appDataEntity);
+        } else {
+          result = await runtime.importData(selectedFile, props.appDataEntity);
+        }
+        ibiz.mc.command.send({
+          srfdecodename: props.appDataEntity.codeName
+        }, "OBJECTCREATED");
+        const {
+          success,
+          total,
+          message: _message
+        } = result;
+        const totalNum = total ? Number(total) : 0;
+        const successNum = success ? Number(success) : 0;
+        const errorNum = total - success;
+        message.value.state = _message ? "error" : "over";
+        message.value.message = _message || `\u5171\u8BA1\u5BFC\u5165\u6570\u636E ${totalNum} \u6761\uFF0C\u9519\u8BEF[${errorNum}]\uFF0C\u6210\u529F[${successNum}]`;
+      } finally {
+        isLoading.value = false;
+      }
+    };
+    const onLinkClick = async () => {
+      var _a;
+      const templateUrl = `${props.appDataEntity.codeName2.toLowerCase()}/importtemplate`;
+      const res = await ibiz.net.request(templateUrl, {
+        responseType: "blob"
+      });
+      if (res.status === 200) {
+        let fileName = ((_a = res.headers["content-disposition"].split(";").find((str) => str.indexOf("filename=") !== -1)) == null ? void 0 : _a.slice(9)) || "";
+        fileName = decodeURIComponent(fileName);
+        const blob = new Blob([res.data], {
+          type: "application/vnd.ms-excel"
+        });
+        const elink = document.createElement("a");
+        elink.download = fileName;
+        elink.style.display = "none";
+        elink.href = URL.createObjectURL(blob);
+        document.body.appendChild(elink);
+        elink.click();
+        URL.revokeObjectURL(elink.href);
+        document.body.removeChild(elink);
+      }
+    };
+    const selectFile = () => {
+      inputUpLoad.value.click();
+    };
+    const onCancelButtonClick = () => {
+      props.dismiss();
+    };
+    return {
+      ns,
+      onLinkClick,
+      selectFile,
+      onCancelButtonClick,
+      onFileChange,
+      inputUpLoad,
+      isLoading,
+      message
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("input", {
+      "ref": "inputUpLoad",
+      "type": "file",
+      "style": "display: none",
+      "accept": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
+      "onChange": this.onFileChange
+    }, null), vue.createVNode("div", {
+      "class": this.ns.e("caption")
+    }, [vue.createTextVNode("\u5BFC\u5165\u6570\u636E")]), this.message.state === "ready" ? vue.createVNode("div", {
+      "class": this.ns.b("upload"),
+      "onClick": this.selectFile
+    }, [vue.createVNode("img", {
+      "class": this.ns.be("upload", "img"),
+      "src": "./assets/images/icon-import.svg"
+    }, null), vue.createVNode("span", {
+      "class": this.ns.be("upload", "text")
+    }, [vue.createTextVNode("\u5355\u51FB\u6B64\u533A\u57DF\u8FDB\u884C\u4E0A\u4F20")])]) : vue.createVNode("div", {
+      "class": [this.ns.b("message")]
+    }, [vue.createVNode("div", {
+      "class": this.ns.be("message", "title")
+    }, [vue.createTextVNode("\u5BFC\u5165\u7ED3\u679C")]), vue.createVNode("div", {
+      "class": [this.ns.be("message", "content"), this.ns.is("error", this.message.state === "error")]
+    }, [this.message.message])]), vue.createVNode("div", {
+      "class": this.ns.e("template-container")
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("template-description")
+    }, [vue.createTextVNode("\u4E0B\u8F7D\u5BFC\u5165\u6A21\u7248\uFF0C\u5E76\u6309\u8981\u6C42\u586B\u5199\uFF1A")]), vue.createVNode("div", {
+      "class": this.ns.e("template-link"),
+      "onClick": this.onLinkClick
+    }, [vue.createVNode("ion-icon", {
+      "class": this.ns.e("link-icon"),
+      "name": "link"
+    }, null), this.appDataEntity.logicName, vue.createTextVNode("\u6570\u636E\u5BFC\u5165\u6A21\u677F\u6587\u4EF6")])]), vue.createVNode("div", {
+      "class": this.ns.e("button-bar")
+    }, [vue.createVNode(vue.resolveComponent("el-button"), {
+      "onClick": this.onCancelButtonClick
+    }, {
+      default: () => [vue.createTextVNode("\u53D6\u6D88")]
+    }), this.message.state !== "ready" && vue.createVNode(vue.resolveComponent("el-button"), {
+      "onClick": this.selectFile
+    }, {
+      default: () => [vue.createTextVNode("\u7EE7\u7EED\u5BFC\u5165")]
+    })])]), [[vue.resolveDirective("loading"), this.isLoading]]);
+  }
+});
+
+exports.DataImport = DataImport;

package/lib/common/data-import/data-import.css

@@ -0,0 +1 @@
+.ibiz-data-import{display:flex;flex-flow:column nowrap;width:544px;height:368px;padding:20px;background:var(--ibiz-color-bg-1)}.ibiz-data-import__caption{margin-bottom:16px;font-size:var(--ibiz-font-size-large);font-weight:600;color:var(--ibiz-text-color)}.ibiz-data-import__template-container{padding:16px 12px 0;margin-bottom:16px}.ibiz-data-import__template-link{color:#57a3fd;cursor:pointer}.ibiz-data-import__link-icon{height:19px;margin-right:2px;vertical-align:bottom}.ibiz-data-import__button-bar{margin-right:20px;text-align:right}.ibiz-data-import__button-bar .ivu-btn{margin-left:8px}.ibiz-data-import-upload{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center;flex-grow:1;cursor:pointer;background:var(--ibiz-color-bg-1);border:1px dashed var(--ibiz-color-border);border-radius:4px}.ibiz-data-import-upload__img{width:50px;height:50px;margin-bottom:20px}.ibiz-data-import-message{display:flex;flex-flow:column nowrap;flex-grow:1;padding:8px 16px;overflow:auto;cursor:pointer;background:var(--ibiz-color-bg-1);border:1px dashed var(--ibiz-color-border);border-radius:4px}.ibiz-data-import-message__title{font-size:var(--ibiz-font-size-medium);font-weight:600}.ibiz-data-import-message__content{padding-left:16px}.ibiz-data-import-message__content.is-error{color:var(--ibiz-color-danger)}

package/lib/common/index.cjs

@@ -2,6 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var vue = require('vue');
 var actionToolbar = require('./action-toolbar/action-toolbar.cjs');
 var col = require('./col/col.cjs');
 var icon = require('./icon/icon.cjs');
@@ -19,6 +20,7 @@ var extendActionTimeline = require('./extend-action-timeline/extend-action-timel
 var viewMessage = require('./view-message/view-message.cjs');
 var pagination = require('./pagination/pagination.cjs');
 var sortBar = require('./sort-bar/sort-bar.cjs');
+var dataImport = require('./data-import/data-import.cjs');
 var controlLoadingPlaceholder = require('./control-loading-placeholder/control-loading-placeholder.cjs');
 
 "use strict";
@@ -41,6 +43,13 @@ const IBizCommonComponents = {
     v.component(viewMessage.ViewMessage.name, viewMessage.ViewMessage);
     v.component(pagination.IBizPagination.name, pagination.IBizPagination);
     v.component(sortBar.IBizSortBar.name, sortBar.IBizSortBar);
+    v.component(dataImport.DataImport.name, dataImport.DataImport);
+    v.component(
+      "IBizMapChart",
+      vue.defineAsyncComponent({
+        loader: () => Promise.resolve().then(function () { return require('./map-chart/map-chart.cjs'); })
+      })
+    );
   }
 };
 

package/lib/common/map-chart/map-chart.cjs

@@ -0,0 +1,220 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var ramda = require('ramda');
+var vue3Util = require('@ibiz-template/vue3-util');
+var mapChart_util = require('./map-chart.util.cjs');
+var mapManager = require('./map-manager.cjs');
+require('./map-chart.css');
+
+"use strict";
+const IBizMapChart = /* @__PURE__ */ vue.defineComponent({
+  name: "IBizMapChart",
+  props: {
+    areaData: {
+      type: Array
+    },
+    pointData: {
+      type: Array
+    },
+    options: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  setup(props, {
+    emit
+  }) {
+    const ns = vue3Util.useNamespace("map-chart");
+    const options = vue.computed(() => {
+      return ramda.mergeDeepWithKey((_key, x, z) => {
+        return ramda.isNil(z) ? x : z;
+      }, mapChart_util.defaultOpts, props.options);
+    });
+    const findData = (id, type) => {
+      if (type === "area" && props.areaData) {
+        return props.areaData.find((item) => item._id === id);
+      }
+      if (type === "point" && props.pointData) {
+        return props.pointData.find((item) => item._id === id);
+      }
+    };
+    const {
+      chartRef,
+      historyNames,
+      changeMap,
+      getCityName,
+      goBack,
+      refresh
+    } = mapManager.useMapManager(options, (mapName) => {
+      const {
+        visualMap,
+        pointSymbol
+      } = options.value;
+      const areaData2 = props.areaData || [];
+      const pointData2 = props.pointData || [];
+      const result = {
+        geo: {
+          map: mapName
+        },
+        tooltip: {
+          trigger: "item",
+          // 全局的tooltip样式
+          textStyle: {
+            color: "#fff",
+            fontSize: 12
+          },
+          backgroundColor: "rgba(0, 0, 0, 0.47)",
+          borderWidth: 0,
+          extraCssText: "backdrop-filter: blur(3px);"
+        },
+        visualMap: {
+          min: visualMap.min,
+          max: visualMap.max,
+          text: visualMap.text,
+          realtime: false,
+          hoverLink: false,
+          inRange: {
+            color: visualMap.rangeColor
+          }
+        },
+        series: [
+          // 地图区块序列
+          {
+            type: "map",
+            map: mapName,
+            // 地图JSON里和name匹配的属性名称
+            nameProperty: "adcodeStr",
+            itemStyle: {
+              borderColor: "#FFF",
+              borderWidth: 2
+            },
+            tooltip: {
+              formatter: (params) => {
+                if (!params.data) {
+                  return;
+                }
+                const find = findData(params.data._id, "area");
+                if (!find) {
+                  return;
+                }
+                return find._tooltip;
+              }
+            },
+            label: {
+              // 区块文字固定显示
+              show: true,
+              // 字体样式
+              color: "#000000",
+              fontSize: 14,
+              formatter: (params) => {
+                return getCityName(params.name);
+              }
+            },
+            select: {
+              disabled: true
+            },
+            data: areaData2.map((item) => ({
+              name: `${item._areaCode}`,
+              value: item._value,
+              _id: item._id
+            }))
+          },
+          // 地图散点序列
+          {
+            type: "scatter",
+            coordinateSystem: "geo",
+            symbol: pointSymbol,
+            symbolSize: 20,
+            visualMap: false,
+            itemStyle: {
+              color: "#FF1D00"
+            },
+            label: {
+              show: true,
+              // 字体样式
+              color: "#000000",
+              fontSize: 14,
+              textShadowBlur: 0,
+              formatter: (params) => {
+                const find = findData(params.data._id, "point");
+                return find == null ? void 0 : find._text;
+              },
+              // 偏移
+              position: "left",
+              offset: [10, -15]
+            },
+            tooltip: {
+              formatter: (params) => {
+                const find = findData(params.data._id, "point");
+                return find == null ? void 0 : find._tooltip;
+              }
+            },
+            data: pointData2.map((item) => {
+              return {
+                _id: item._id,
+                symbol: item._symbol ? `image://${item._symbol}` : void 0,
+                value: [Number(item._longitude), Number(item._latitude)],
+                // 每个点逃离visualMap
+                visualMap: false
+              };
+            })
+          }
+        ]
+      };
+      return result;
+    }, (name, e) => {
+      switch (name) {
+        case "mapChange":
+          emit("mapChange", e);
+          break;
+        case "pointClick":
+          emit("pointClick", {
+            data: findData(e._id, "point")
+          });
+          break;
+        case "areaClick":
+          emit("areaClick", {
+            data: findData(e._id, "area")
+          });
+          break;
+        default:
+          break;
+      }
+    });
+    vue.onMounted(() => {
+      changeMap(options.value.defaultAreaCode, true);
+    });
+    const {
+      areaData,
+      pointData
+    } = vue.toRefs(props);
+    vue.watch([areaData, pointData], () => {
+      refresh();
+    });
+    return {
+      ns,
+      chartRef,
+      historyNames,
+      goBack
+    };
+  },
+  render() {
+    return vue.createVNode("div", {
+      "class": this.ns.b()
+    }, [vue.createVNode("div", {
+      "class": this.ns.e("chart"),
+      "ref": "chartRef"
+    }, null), this.historyNames.length > 1 && vue.createVNode("div", {
+      "class": this.ns.e("goback"),
+      "onClick": () => {
+        this.goBack();
+      }
+    }, [vue.createTextVNode("\u8FD4\u56DE")])]);
+  }
+});
+
+exports.IBizMapChart = IBizMapChart;
+exports.default = IBizMapChart;

package/lib/common/map-chart/map-chart.css

@@ -0,0 +1 @@
+.ibiz-map-chart{position:relative;min-width:300px;min-height:300px}.ibiz-map-chart__chart{width:100%;height:100%}.ibiz-map-chart__goback{position:absolute;top:60px;right:0;width:100px;height:100px;font-size:20px;color:#002a5f;text-decoration:underline;letter-spacing:6px;cursor:pointer}

package/lib/common/map-chart/map-chart.util.cjs

@@ -0,0 +1,28 @@
+'use strict';
+
+"use strict";
+const GradientColors = ["#90d1e7", "#fff600", "#ff5200"];
+const defaultOpts = {
+  /** true地图code标识使用字符串，false使用数字 */
+  strAreaCode: false,
+  /** 热力图配置 */
+  visualMap: {
+    /** 两端的文本，如 ['高', '低'] */
+    text: ["\u9AD8", "\u4F4E"],
+    /** 底部代表的值 */
+    min: 0,
+    /** 顶部代表的值 */
+    max: 100,
+    /** 热力图渐变颜色数组 */
+    rangeColor: GradientColors
+  },
+  /** 点图标 */
+  pointSymbol: "pin",
+  /** 地图json数据基础路径 */
+  jsonBaseUrl: "/assets/json/map",
+  /** 默认打开的区域编码 */
+  defaultAreaCode: 1e5
+};
+
+exports.GradientColors = GradientColors;
+exports.defaultOpts = defaultOpts;

package/lib/common/map-chart/map-json.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+"use strict";
+async function getJsonUrl(baseUrl, code) {
+  const res = await ibiz.net.axios({
+    url: `${baseUrl}/${code}.json`
+  });
+  return res.data;
+}
+
+exports.getJsonUrl = getJsonUrl;

package/lib/common/map-chart/map-manager.cjs

@@ -0,0 +1,124 @@
+'use strict';
+
+var echarts = require('echarts');
+var vue = require('vue');
+var mapJson = require('./map-json.cjs');
+
+"use strict";
+function useMapManager(opts, calcEchartsOpts, emit) {
+  const mapInfos = /* @__PURE__ */ new Map();
+  const currentName = vue.ref("");
+  const historyNames = vue.ref([]);
+  let chart;
+  const chartRef = vue.ref();
+  const parseJson = (json) => {
+    const info = {
+      cityNames: {},
+      noChild: json.features.length === 1
+    };
+    json.features.forEach((item) => {
+      const { adcode, name } = item.properties;
+      info.cityNames[adcode] = name;
+    });
+    return info;
+  };
+  const registerMap = async (name) => {
+    if (mapInfos.has(name)) {
+      return;
+    }
+    const json = await mapJson.getJsonUrl(opts.value.jsonBaseUrl, name);
+    mapInfos.set(name, parseJson(json));
+    echarts.registerMap(name, json);
+  };
+  const getCityName = (mapName) => {
+    const info = mapInfos.get(currentName.value);
+    if (info) {
+      return info.cityNames[mapName];
+    }
+  };
+  const refresh = () => {
+    if (currentName.value) {
+      const options = calcEchartsOpts(currentName.value);
+      chart.setOption(options);
+      chart.resize();
+    }
+  };
+  const changeMap = async (name, isInit = false) => {
+    if (!isInit) {
+      emit("mapChange", {
+        areaCode: opts.value.strAreaCode ? `${name}` : Number(name)
+      });
+    }
+    const strName = `${name}`;
+    if (!mapInfos.has(strName)) {
+      await registerMap(strName);
+    }
+    currentName.value = strName;
+    historyNames.value.push(strName);
+    refresh();
+  };
+  const goBack = () => {
+    if (historyNames.value.length > 1) {
+      historyNames.value.pop();
+      const name = historyNames.value.pop();
+      changeMap(name);
+    }
+  };
+  vue.onMounted(() => {
+    chart = echarts.init(chartRef.value);
+    window.addEventListener("resize", () => {
+      chart == null ? void 0 : chart.resize();
+    });
+    chart.on("click", (params) => {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          emit("pointClick", params.data);
+          return;
+        }
+        if (params.seriesType === "map") {
+          if (params.data) {
+            emit("areaClick", params.data);
+          }
+          if (params.name !== currentName.value) {
+            debugger;
+            changeMap(params.name);
+          }
+        }
+      }
+    });
+    chart.on("mouseover", function(params) {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          const dataIndex = params.dataIndex;
+          const option = chart.getOption();
+          const seriesData = option.series[params.seriesIndex].data;
+          const originSize = option.series[params.seriesIndex].symbolSize;
+          seriesData[dataIndex].symbolSize = originSize + 10;
+          chart.setOption(option);
+        }
+      }
+    });
+    chart.on("mouseout", function(params) {
+      if (params.componentType === "series") {
+        if (params.seriesType === "scatter") {
+          const dataIndex = params.dataIndex;
+          const option = chart.getOption();
+          const seriesData = option.series[params.seriesIndex].data;
+          delete seriesData[dataIndex].symbolSize;
+          chart.setOption(option);
+        }
+      }
+    });
+  });
+  return {
+    chartRef,
+    historyNames,
+    currentName,
+    changeMap,
+    getCityName,
+    goBack,
+    refresh
+  };
+}
+
+exports.useMapManager = useMapManager;

package/lib/control/form/form-detail/form-mdctrl/form-mdctrl-container/form-mdctrl-container.cjs

@@ -31,7 +31,7 @@ const FormMDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
     const insertButtonClick = () => {
       emit("insertButtonClick");
     };
-    const hasCaption = !!c.model.caption;
+    const hasCaption = c.model.showCaption && !!c.model.caption;
     return {
       ns,
       c,
@@ -51,12 +51,12 @@ const FormMDCtrlContainer = /* @__PURE__ */ vue.defineComponent({
         "class": this.ns.b("title")
       }, [vue.createVNode("span", {
         "class": this.ns.b("caption")
-      }, [this.controller.model.caption]), vue.withDirectives(vue.createVNode(vue.resolveComponent("el-button"), {
+      }, [this.controller.model.showCaption && this.controller.model.caption]), this.buttonVisible && this.controller.isCreate && vue.createVNode(vue.resolveComponent("el-button"), {
         "class": this.ns.b("add-btn"),
         "onClick": () => this.insertButtonClick()
       }, {
         default: () => [vue.createTextVNode("\u6DFB\u52A0")]
-      }), [[vue.vShow, this.buttonVisible]])]), renderFormContent()]]);
+      })]), renderFormContent()]]);
     };
     return vue.createVNode("div", {
       "class": [this.ns.b(), this.ns.b(this.c.model.codeName), this.ns.b(this.c.model.contentType.toLowerCase()), ...this.controller.containerClass, this.ns.is("no-caption", !this.hasCaption)]