@shijiu/jsview-vue 0.9.246 → 0.9.254

package/utils/JsViewVueWidget/JsvPreload/index.js

@@ -1,21 +1,21 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2021-10-13 15:12:45
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-22 14:24:36
- * @Description: file content
- */
-//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
-import * as JsvPreload from "./JsvPreload.vue";
-let _JsvPreload = JsvPreload;
-if (
-  window.JsvWidgetWrapperGroup &&
-  window.JsvWidgetWrapperGroup.BrowserPreload
-) {
-  _JsvPreload = window.JsvWidgetWrapperGroup.BrowserPreload;
-}
-let component = _JsvPreload.default;
-let buildPreloadInfo = JsvPreload.buildPreloadInfo;
-let buildDownloadInfo = JsvPreload.buildDownloadInfo;
-export default component;
-export { buildPreloadInfo, buildDownloadInfo };
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 15:12:45
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-22 14:24:36
+ * @Description: file content
+ */
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvPreload from "./JsvPreload.vue";
+let _JsvPreload = JsvPreload;
+if (
+  window.JsvWidgetWrapperGroup &&
+  window.JsvWidgetWrapperGroup.BrowserPreload
+) {
+  _JsvPreload = window.JsvWidgetWrapperGroup.BrowserPreload;
+}
+let component = _JsvPreload.default;
+let buildPreloadInfo = JsvPreload.buildPreloadInfo;
+let buildDownloadInfo = JsvPreload.buildDownloadInfo;
+export default component;
+export { buildPreloadInfo, buildDownloadInfo };

package/utils/JsViewVueWidget/JsvQrcode/JsvQrcode.vue

@@ -1,140 +1,140 @@
-<!--
- * 【模块 export 内容】
- * QRCode：Vue高阶组件，描绘二维码，
- *      props说明:
- *            value {string} (必须)     二维码代表的字符串
- *            size {int} (必须)      二维码展示尺寸，二维码为正方形，所以改值代表宽和高，默认值：128
- *            fgColor {string}          二维码前景色，默认值"#000000"，黑色
- *            bgColor {string}          二维码背景色，默认值"#ffffff"，白色
- *            level {string}            二维码的容错能力，可选值{'L':低, 'M':中, 'H':高, 'Q':最精细}，默认值'L'
- *            imageSettings {Object}    设置中心logo图片，默认值为null，设置格式为：
- *                       {
- *                              src {string}        logo的url地址
- *                              height {int}     logo的宽度
- *                              height {int}     logo的高度
- *                       }
- */
- -->
- <script>
-import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
-
-export default {
-  props: {
-    value: String,
-    size: Number,
-    fgColor: String,
-    bgColor: String,
-    level: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
-    imageSettings: Object,
-  },
-  methods: {
-    getImageSettings() {
-      const imageSettings = this.imageSettings;
-      if (!imageSettings) {
-        return null;
-      }
-      const w = imageSettings.width;
-      const h = imageSettings.height;
-      const x = !imageSettings.x ? this.size / 2 - w / 2 : imageSettings.x;
-      const y = !imageSettings.y ? this.size / 2 - h / 2 : imageSettings.y;
-
-      return { x, y, h, w };
-    },
-    renderJsvQRCode() {
-      // Remove old QRCode
-      if (this.qrCodeView !== null) {
-        this.jsvBaseView.RemoveView(this.qrCodeView);
-      }
-
-      let view = null;
-      let lp_params = null;
-      const texture_manager = ForgeExtension.TextureManager;
-      const qrcode_texture = texture_manager.GetQRCodeTexture(
-        this.value,
-        this.size,
-        this.size,
-        Forge.QRCodeLevel[this.level],
-        this.bgColor,
-        this.fgColor
-      );
-      // 构建二维码底部数据
-      view = new Forge.LayoutView(new Forge.TextureSetting(qrcode_texture));
-      const calculatedImageSettings = this.getImageSettings();
-      // 构建二维码中心图片
-      if (this.imageSettings && calculatedImageSettings) {
-        let url = this.imageSettings.src;
-        if (typeof url === "string") {
-          url = new window.JsView.React.UrlRef(this.imageSettings.src).href;
-        }
-        const img_texture = texture_manager.GetImage(url);
-        const img_view = new Forge.LayoutView(
-          new Forge.TextureSetting(img_texture)
-        );
-        view.AddView(
-          img_view,
-          new Forge.LayoutParams({
-            x: calculatedImageSettings.x,
-            y: calculatedImageSettings.y,
-            width: calculatedImageSettings.w,
-            height: calculatedImageSettings.h,
-          })
-        );
-        console.log("view = " + view);
-      }
-      // 二维码都位置与大小
-      lp_params = new Forge.LayoutParams({
-        x: 0,
-        y: 0,
-        width: this.size,
-        height: this.size,
-      });
-
-      // Add new QRCode
-      this.qrCodeView = view;
-      this.jsvBaseView.AddView(this.qrCodeView, lp_params);
-    },
-  },
-  created() {
-    // 构建二维码父View
-    const propsData = {
-      value: this.value,
-      size: this.size,
-      level: this.level,
-      bgColor: this.bgColor,
-      fgColor: this.fgColor,
-      imageSettings: this.imageSettings,
-    };
-    if (this.jsvBaseView === null) {
-      this.jsvBaseView = new Forge.LayoutView();
-      this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
-        new Forge.ViewInfo(this.jsvBaseView, { x: 0, y: 0 })
-      );
-    }
-    // 构建QRCdoe view
-    if (this.oldProps !== propsData) {
-      this.renderJsvQRCode();
-    }
-    // return this.innerViewId;
-  },
-  data() {
-    return {
-      oldProps: null,
-      innerViewId: -1,
-      jsvBaseView: null,
-      qrCodeView: null,
-    };
-  },
-  mounted() {
-    if (this.innerViewId !== -1) {
-      ForgeExtension.RootActivity.ViewStore.remove(this.innerViewId);
-      this.innerViewId = -1;
-      this.jsvBaseView = null;
-    }
-  },
-};
-</script>
-
- <template>
-  <div :jsv_innerview="innerViewId"></div>
-</template>
-
+<!--
+ * 【模块 export 内容】
+ * QRCode：Vue高阶组件，描绘二维码，
+ *      props说明:
+ *            value {string} (必须)     二维码代表的字符串
+ *            size {int} (必须)      二维码展示尺寸，二维码为正方形，所以改值代表宽和高，默认值：128
+ *            fgColor {string}          二维码前景色，默认值"#000000"，黑色
+ *            bgColor {string}          二维码背景色，默认值"#ffffff"，白色
+ *            level {string}            二维码的容错能力，可选值{'L':低, 'M':中, 'H':高, 'Q':最精细}，默认值'L'
+ *            imageSettings {Object}    设置中心logo图片，默认值为null，设置格式为：
+ *                       {
+ *                              src {string}        logo的url地址
+ *                              height {int}     logo的宽度
+ *                              height {int}     logo的高度
+ *                       }
+ */
+ -->
+ <script>
+import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
+
+export default {
+  props: {
+    value: String,
+    size: Number,
+    fgColor: String,
+    bgColor: String,
+    level: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+    imageSettings: Object,
+  },
+  methods: {
+    getImageSettings() {
+      const imageSettings = this.imageSettings;
+      if (!imageSettings) {
+        return null;
+      }
+      const w = imageSettings.width;
+      const h = imageSettings.height;
+      const x = !imageSettings.x ? this.size / 2 - w / 2 : imageSettings.x;
+      const y = !imageSettings.y ? this.size / 2 - h / 2 : imageSettings.y;
+
+      return { x, y, h, w };
+    },
+    renderJsvQRCode() {
+      // Remove old QRCode
+      if (this.qrCodeView !== null) {
+        this.jsvBaseView.RemoveView(this.qrCodeView);
+      }
+
+      let view = null;
+      let lp_params = null;
+      const texture_manager = ForgeExtension.TextureManager;
+      const qrcode_texture = texture_manager.GetQRCodeTexture(
+        this.value,
+        this.size,
+        this.size,
+        Forge.QRCodeLevel[this.level],
+        this.bgColor,
+        this.fgColor
+      );
+      // 构建二维码底部数据
+      view = new Forge.LayoutView(new Forge.TextureSetting(qrcode_texture));
+      const calculatedImageSettings = this.getImageSettings();
+      // 构建二维码中心图片
+      if (this.imageSettings && calculatedImageSettings) {
+        let url = this.imageSettings.src;
+        if (typeof url === "string") {
+          url = new window.JsView.React.UrlRef(this.imageSettings.src).href;
+        }
+        const img_texture = texture_manager.GetImage(url);
+        const img_view = new Forge.LayoutView(
+          new Forge.TextureSetting(img_texture)
+        );
+        view.AddView(
+          img_view,
+          new Forge.LayoutParams({
+            x: calculatedImageSettings.x,
+            y: calculatedImageSettings.y,
+            width: calculatedImageSettings.w,
+            height: calculatedImageSettings.h,
+          })
+        );
+        console.log("view = " + view);
+      }
+      // 二维码都位置与大小
+      lp_params = new Forge.LayoutParams({
+        x: 0,
+        y: 0,
+        width: this.size,
+        height: this.size,
+      });
+
+      // Add new QRCode
+      this.qrCodeView = view;
+      this.jsvBaseView.AddView(this.qrCodeView, lp_params);
+    },
+  },
+  created() {
+    // 构建二维码父View
+    const propsData = {
+      value: this.value,
+      size: this.size,
+      level: this.level,
+      bgColor: this.bgColor,
+      fgColor: this.fgColor,
+      imageSettings: this.imageSettings,
+    };
+    if (this.jsvBaseView === null) {
+      this.jsvBaseView = new Forge.LayoutView();
+      this.innerViewId = ForgeExtension.RootActivity.ViewStore.add(
+        new Forge.ViewInfo(this.jsvBaseView, { x: 0, y: 0 })
+      );
+    }
+    // 构建QRCdoe view
+    if (this.oldProps !== propsData) {
+      this.renderJsvQRCode();
+    }
+    // return this.innerViewId;
+  },
+  data() {
+    return {
+      oldProps: null,
+      innerViewId: -1,
+      jsvBaseView: null,
+      qrCodeView: null,
+    };
+  },
+  mounted() {
+    if (this.innerViewId !== -1) {
+      ForgeExtension.RootActivity.ViewStore.remove(this.innerViewId);
+      this.innerViewId = -1;
+      this.jsvBaseView = null;
+    }
+  },
+};
+</script>
+
+ <template>
+  <div :jsv_innerview="innerViewId"></div>
+</template>
+

package/utils/JsViewVueWidget/JsvQrcode/index.js

@@ -1,18 +1,18 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2021-10-13 15:12:45
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-13 17:41:34
- * @Description: file content
- */
-//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
-import * as JsvQrcode from "./JsvQrcode.vue";
-let _JsvQrcode = JsvQrcode;
-if (
-  window.JsvWidgetWrapperGroup &&
-  window.JsvWidgetWrapperGroup.BrowserQrcode
-) {
-  _JsvQrcode = window.JsvWidgetWrapperGroup.BrowserQrcode;
-}
-let component = _JsvQrcode.default;
-export default component;
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 15:12:45
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-13 17:41:34
+ * @Description: file content
+ */
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvQrcode from "./JsvQrcode.vue";
+let _JsvQrcode = JsvQrcode;
+if (
+  window.JsvWidgetWrapperGroup &&
+  window.JsvWidgetWrapperGroup.BrowserQrcode
+) {
+  _JsvQrcode = window.JsvWidgetWrapperGroup.BrowserQrcode;
+}
+let component = _JsvQrcode.default;
+export default component;

package/utils/JsViewVueWidget/JsvSpray/JsvSpray.vue

@@ -1,140 +1,140 @@
-<!--
- * @Author: ChenChanghua
- * @Date: 2021-10-12 18:20:43
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-18 16:42:20
- * @Description: file content
--->
-
-<!--
- * 【模块 export 内容】
- * JsvSpray：Vue高阶组件，粒子效果控件
- *      prop说明:
- *          pointRes {string} (必需)粒子图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
- *          sprayStyle {object}  (必需)粒子效果配置
- *
- * prop中的sprayStyle说明:
- *      type {int} (必需)喷射类型 0: 一次喷射 1: 持续喷射
- *      particleNum {int} (必需)粒子个数
- *      deltaAngle {int} (必需)粒子喷射角度范围。如设30则粒子喷射范围为div上边法向正负30度
- *      deltaWidth {int} (必需)粒子喷射位置宽度范围
- *      deltaHeight {int} (必需)粒子喷射位置高度范围
- *      pointSizeMin {int} (必需)粒子尺寸下限(像素)
- *      pointSizeMax {int} (必需)粒子尺寸上限(像素)
- *      speedMin {float} (必需)粒子速度下限
- *      speedMax {float} (必需)粒子速度上限
- *      lifeMin {int} (必需)粒子生命周期下限(ms)
- *      lifeMax {int} (必需)粒子生命周期上限(ms)
- *      accelerateX {float} (必需)水平方向加速度
- *      accelerateY {float} (必需)垂直方向加速度
- *      addNumSpeed {float} 持续喷射时，起始粒子添加速度(个/ms), 默认为0.001
- *      enableFade {boolean} 粒子淡出开关, 默认为false
- *      enableShrink {boolean} 粒子缩小开关, 默认为false
--->
-<script>
-import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
-
-let buildForgeView = (pointRes, sprayStyle) => {
-  if (!pointRes) {
-    return -1;
-  }
-  const texture_manager = ForgeExtension.TextureManager;
-  let texture_setting;
-  if (pointRes.trim().startsWith("#") || pointRes.trim().startsWith("rgba")) {
-    texture_setting = new Forge.TextureSetting(
-      texture_manager.GetColorTexture(pointRes)
-    );
-  } else {
-    const base_url = pointRes;
-    let image_url = base_url;
-    if (base_url && base_url.indexOf("http") === 0) {
-      image_url = base_url;
-    } else if (window.JsView.React.UrlRef) {
-      image_url = new window.JsView.React.UrlRef(pointRes).href;
-    }
-    texture_setting = new Forge.ExternalTextureSetting(
-      texture_manager.GetImage2(image_url, false, null, "RGB_8888", null)
-    );
-  }
-  const spray_view = new Forge.SprayView(texture_setting);
-  const add_num_per_frame = sprayStyle.addNumSpeed
-    ? sprayStyle.addNumSpeed
-    : 0.001;
-  const accelerate_x =
-    typeof sprayStyle.accelerateX !== "undefined" ? sprayStyle.accelerateX : 0;
-  const accelerate_y =
-    typeof sprayStyle.accelerateY !== "undefined"
-      ? sprayStyle.accelerateY
-      : -100;
-  spray_view.SetSprayInfo(
-    sprayStyle.type,
-    sprayStyle.particleNum,
-    add_num_per_frame,
-    (sprayStyle.deltaAngle / 180) * 3.1415,
-    sprayStyle.deltaWidth,
-    sprayStyle.deltaHeight,
-    sprayStyle.pointSizeMin,
-    sprayStyle.pointSizeMax,
-    sprayStyle.speedMin,
-    sprayStyle.speedMax,
-    sprayStyle.lifeMin,
-    sprayStyle.lifeMax,
-    accelerate_x,
-    accelerate_y,
-    sprayStyle.enableFade,
-    sprayStyle.enableShrink
-  );
-  const view_width =
-    sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
-  const view_height =
-    sprayStyle.deltaHeight === 0 ? 1 : 2 * sprayStyle.deltaHeight;
-  return ForgeExtension.RootActivity.ViewStore.add(
-    new Forge.ViewInfo(spray_view, {
-      x: 0,
-      y: 0,
-      width: view_width,
-      height: view_height,
-    })
-  );
-};
-
-export default {
-  props: {
-    pointRes: {
-      type: String,
-      required: true,
-    },
-    sprayStyle: {
-      type: Object,
-      required: true,
-    },
-  },
-  data() {
-    return {
-      viewId: -1,
-    };
-  },
-  methods: {
-    unloadView() {
-      if (this.viewId >= 0) {
-        ForgeExtension.RootActivity.ViewStore.remove(this.viewId);
-        this.viewId = -1;
-      }
-    },
-  },
-  created() {
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
-  },
-  updated() {
-    this.unloadView();
-    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
-  },
-  beforeUnmount() {
-    this.unloadView();
-  },
-};
-</script>
-
-<template>
-  <div :jsv_innerview="viewId"></div>
+<!--
+ * @Author: ChenChanghua
+ * @Date: 2021-10-12 18:20:43
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-11-18 16:42:20
+ * @Description: file content
+-->
+
+<!--
+ * 【模块 export 内容】
+ * JsvSpray：Vue高阶组件，粒子效果控件
+ *      prop说明:
+ *          pointRes {string} (必需)粒子图案 可选值: 绝对路径url|url(相对路径url)|#FFFFFF|rbga(255,0,0,1.0)
+ *          sprayStyle {object}  (必需)粒子效果配置
+ *
+ * prop中的sprayStyle说明:
+ *      type {int} (必需)喷射类型 0: 一次喷射 1: 持续喷射
+ *      particleNum {int} (必需)粒子个数
+ *      deltaAngle {int} (必需)粒子喷射角度范围。如设30则粒子喷射范围为div上边法向正负30度
+ *      deltaWidth {int} (必需)粒子喷射位置宽度范围
+ *      deltaHeight {int} (必需)粒子喷射位置高度范围
+ *      pointSizeMin {int} (必需)粒子尺寸下限(像素)
+ *      pointSizeMax {int} (必需)粒子尺寸上限(像素)
+ *      speedMin {float} (必需)粒子速度下限
+ *      speedMax {float} (必需)粒子速度上限
+ *      lifeMin {int} (必需)粒子生命周期下限(ms)
+ *      lifeMax {int} (必需)粒子生命周期上限(ms)
+ *      accelerateX {float} (必需)水平方向加速度
+ *      accelerateY {float} (必需)垂直方向加速度
+ *      addNumSpeed {float} 持续喷射时，起始粒子添加速度(个/ms), 默认为0.001
+ *      enableFade {boolean} 粒子淡出开关, 默认为false
+ *      enableShrink {boolean} 粒子缩小开关, 默认为false
+-->
+<script>
+import { Forge, ForgeExtension } from "../../../dom/jsv-forge-define";
+
+let buildForgeView = (pointRes, sprayStyle) => {
+  if (!pointRes) {
+    return -1;
+  }
+  const texture_manager = ForgeExtension.TextureManager;
+  let texture_setting;
+  if (pointRes.trim().startsWith("#") || pointRes.trim().startsWith("rgba")) {
+    texture_setting = new Forge.TextureSetting(
+      texture_manager.GetColorTexture(pointRes)
+    );
+  } else {
+    const base_url = pointRes;
+    let image_url = base_url;
+    if (base_url && base_url.indexOf("http") === 0) {
+      image_url = base_url;
+    } else if (window.JsView.React.UrlRef) {
+      image_url = new window.JsView.React.UrlRef(pointRes).href;
+    }
+    texture_setting = new Forge.ExternalTextureSetting(
+      texture_manager.GetImage2(image_url, false, null, "RGB_8888", null)
+    );
+  }
+  const spray_view = new Forge.SprayView(texture_setting);
+  const add_num_per_frame = sprayStyle.addNumSpeed
+    ? sprayStyle.addNumSpeed
+    : 0.001;
+  const accelerate_x =
+    typeof sprayStyle.accelerateX !== "undefined" ? sprayStyle.accelerateX : 0;
+  const accelerate_y =
+    typeof sprayStyle.accelerateY !== "undefined"
+      ? sprayStyle.accelerateY
+      : -100;
+  spray_view.SetSprayInfo(
+    sprayStyle.type,
+    sprayStyle.particleNum,
+    add_num_per_frame,
+    (sprayStyle.deltaAngle / 180) * 3.1415,
+    sprayStyle.deltaWidth,
+    sprayStyle.deltaHeight,
+    sprayStyle.pointSizeMin,
+    sprayStyle.pointSizeMax,
+    sprayStyle.speedMin,
+    sprayStyle.speedMax,
+    sprayStyle.lifeMin,
+    sprayStyle.lifeMax,
+    accelerate_x,
+    accelerate_y,
+    sprayStyle.enableFade,
+    sprayStyle.enableShrink
+  );
+  const view_width =
+    sprayStyle.deltaWidth === 0 ? 1 : 2 * sprayStyle.deltaWidth;
+  const view_height =
+    sprayStyle.deltaHeight === 0 ? 1 : 2 * sprayStyle.deltaHeight;
+  return ForgeExtension.RootActivity.ViewStore.add(
+    new Forge.ViewInfo(spray_view, {
+      x: 0,
+      y: 0,
+      width: view_width,
+      height: view_height,
+    })
+  );
+};
+
+export default {
+  props: {
+    pointRes: {
+      type: String,
+      required: true,
+    },
+    sprayStyle: {
+      type: Object,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      viewId: -1,
+    };
+  },
+  methods: {
+    unloadView() {
+      if (this.viewId >= 0) {
+        ForgeExtension.RootActivity.ViewStore.remove(this.viewId);
+        this.viewId = -1;
+      }
+    },
+  },
+  created() {
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
+  },
+  updated() {
+    this.unloadView();
+    this.viewId = buildForgeView(this.pointRes, this.sprayStyle);
+  },
+  beforeUnmount() {
+    this.unloadView();
+  },
+};
+</script>
+
+<template>
+  <div :jsv_innerview="viewId"></div>
 </template>

package/utils/JsViewVueWidget/JsvSpray/index.js

@@ -1,15 +1,15 @@
-/*
- * @Author: ChenChanghua
- * @Date: 2021-10-13 15:14:29
- * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-10-18 14:09:04
- * @Description: file content
- */
-//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
-import * as JsvSpray from "./JsvSpray.vue";
-let _JsvSpray = JsvSpray;
-if (window.JsvWidgetWrapperGroup && window.JsvWidgetWrapperGroup.BrowserSpray) {
-  _JsvSpray = window.JsvWidgetWrapperGroup.BrowserSpray;
-}
-let component = _JsvSpray.default;
+/*
+ * @Author: ChenChanghua
+ * @Date: 2021-10-13 15:14:29
+ * @LastEditors: ChenChanghua
+ * @LastEditTime: 2021-10-18 14:09:04
+ * @Description: file content
+ */
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvSpray from "./JsvSpray.vue";
+let _JsvSpray = JsvSpray;
+if (window.JsvWidgetWrapperGroup && window.JsvWidgetWrapperGroup.BrowserSpray) {
+  _JsvSpray = window.JsvWidgetWrapperGroup.BrowserSpray;
+}
+let component = _JsvSpray.default;
 export default component;