cnhis-design-vue 3.1.23-beta.8 → 3.1.23

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/dateRendererPlugin/index.js

@@ -0,0 +1,39 @@
+import { createVNode, mergeProps } from 'vue';
+import '../../../../../index.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
+import EditDate from './editDate.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
+
+function dateRendererPlugin() {
+  const pluginName = "dateRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.DATE, {
+        renderCell({
+          props
+        }, {
+          row,
+          column
+        }) {
+          return [createVNode("span", null, [row[column.field]])];
+        },
+        renderEdit({
+          props
+        }, {
+          row,
+          column,
+          $rowIndex
+        }) {
+          return [createVNode(EditDate, mergeProps((props == null ? void 0 : props.componentProps) || {}, {
+            "column": column,
+            "row": row,
+            "index": $rowIndex
+          }), null)];
+        }
+      });
+    }
+  });
+}
+
+export { dateRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/hooks/useCommon.d.ts

@@ -0,0 +1,4 @@
+export declare const useCommon: () => {
+    formRef: import("vue").Ref<HTMLElement | null>;
+    isShow: import("vue").Ref<boolean>;
+};

package/es/components/{big-table/src/components/edit-form/useCommon2.js → iho-table/src/plugins/rendererPlugins/editableWidgets/hooks/useCommon.js}

@@ -1,14 +1,12 @@
 import { ref, onMounted } from 'vue';
 
-const useCommon = (props, attrs) => {
+const useCommon = () => {
   const formRef = ref(null);
   const isShow = ref(false);
   onMounted(() => {
     var _a;
-    if (attrs.editTrigger !== "manual") {
-      (_a = formRef.value) == null ? void 0 : _a.focus();
-      isShow.value = true;
-    }
+    (_a = formRef.value) == null ? void 0 : _a.focus();
+    isShow.value = true;
   });
   return {
     formRef,

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/index.d.ts

@@ -1,2 +1,5 @@
 export * from './inputRendererPlugin';
 export * from './separateRendererPlugin';
+export * from './selectRendererPlugin';
+export * from './dateRendererPlugin';
+export * from './timeRendererPlugin';

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/index.js

@@ -1,2 +1,5 @@
 export { inputRendererPlugin } from './inputRendererPlugin.js';
 export { separateRendererPlugins } from './separateRendererPlugin/index.js';
+export { selectRendererPlugin } from './selectRendererPlugin/index.js';
+export { dateRendererPlugin } from './dateRendererPlugin/index.js';
+export { timeRendererPlugin } from './timeRendererPlugin/index.js';

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/inputRendererPlugin.js

@@ -1,15 +1,15 @@
 import { createVNode, inject } from 'vue';
 import { NInput } from 'naive-ui';
-import '../../../../index2.js';
-import { INPUT_TYPE, InjectionIhoTableEmits } from '../../../constants/index2.js';
-import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
+import '../../../../index.js';
+import { EDITABLE_WIDGET_TYPE, InjectionIhoTableEmits } from '../../../constants/index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
 
 function inputRendererPlugin() {
   const pluginName = "inputRendererPlugins";
   return defineTablePlugin({
     name: pluginName,
     vxe(instance) {
-      instance.renderer.add(INPUT_TYPE.INPUT, {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.INPUT, {
         renderCell(renderOpts, {
           row,
           column

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/editSelect.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+import { AnyObject } from '../../../../../../../../es/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/editSelect.js

@@ -0,0 +1,60 @@
+import { defineComponent, inject, createVNode, mergeProps } from 'vue';
+import { NSelect } from 'naive-ui';
+import { InjectionIhoTableEmits } from '../../../../constants/index.js';
+import { useCommon } from '../hooks/useCommon.js';
+
+var EditSelect = defineComponent({
+  name: "EditSelect",
+  inheritAttrs: false,
+  components: {
+    NSelect
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, {
+    attrs,
+    slots,
+    emit
+  }) {
+    const globEmit = inject(InjectionIhoTableEmits);
+    const {
+      formRef,
+      isShow
+    } = useCommon();
+    function onUpdateValue(value) {
+      globEmit("formChange", {
+        value,
+        row: props.row,
+        column: props.column,
+        index: props.index
+      });
+    }
+    return () => createVNode(NSelect, mergeProps({
+      "ref": formRef,
+      "show": isShow.value,
+      "onUpdate:show": ($event) => isShow.value = $event
+    }, attrs, {
+      "value": props.row[props.column.field],
+      "onUpdate:value": ($event) => props.row[props.column.field] = $event,
+      "consistentMenuWidth": false,
+      "clearable": true,
+      "filterable": true,
+      "placeholder": attrs.placeholder || "\u8BF7\u9009\u62E9",
+      "onUpdateValue": onUpdateValue
+    }), null);
+  }
+});
+
+export { EditSelect as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/index.d.ts

@@ -0,0 +1 @@
+export declare function selectRendererPlugin(): import("../../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/index.js

@@ -0,0 +1,40 @@
+import { createVNode, mergeProps } from 'vue';
+import '../../../../../index.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
+import EditSelect from './editSelect.js';
+import { getDefaultValue } from './selectUtils.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
+
+function selectRendererPlugin() {
+  const pluginName = "selectRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.SELECT, {
+        renderCell({
+          props
+        }, {
+          row,
+          column
+        }) {
+          return [createVNode("span", null, [getDefaultValue(row, props)])];
+        },
+        renderEdit({
+          props
+        }, {
+          row,
+          column,
+          $rowIndex
+        }) {
+          return [createVNode(EditSelect, mergeProps((props == null ? void 0 : props.componentProps) || {}, {
+            "column": column,
+            "row": row,
+            "index": $rowIndex
+          }), null)];
+        }
+      });
+    }
+  });
+}
+
+export { selectRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/selectUtils.d.ts

@@ -0,0 +1,2 @@
+import { LowCodeTableFieldItem } from '../../../../../../../../es/components/iho-table/src/types';
+export declare function getDefaultValue(row: any, item: LowCodeTableFieldItem | any): any;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/selectRendererPlugin/selectUtils.js

@@ -0,0 +1,20 @@
+function getDefaultValue(row, item) {
+  var _a;
+  const value = row[item.columnName];
+  if (Array.isArray(value))
+    return (_a = value.map((v) => getValue(v))) == null ? void 0 : _a.join(",");
+  return getValue(value);
+  function getValue(value2) {
+    var _a2, _b;
+    const findValue = (options) => {
+      var _a3;
+      return ((_a3 = options == null ? void 0 : options.find((v) => v.value == value2)) == null ? void 0 : _a3.label) || value2 || "";
+    };
+    if (item.formatMap) {
+      return row[(_a2 = item.formatMap) == null ? void 0 : _a2.label];
+    }
+    return findValue(((_b = item.componentProps) == null ? void 0 : _b.options) || []);
+  }
+}
+
+export { getDefaultValue };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/{edit-separate.js → editSeparate.js}

@@ -1,11 +1,11 @@
 import { defineComponent, inject, ref, watch, computed, onMounted, onDeactivated, openBlock, createBlock, unref, withCtx, createElementVNode, withModifiers, normalizeStyle, toDisplayString, renderSlot, createVNode } from 'vue';
 import { cloneDeep, isObject, isArray } from 'lodash-es';
 import { NPopover, NInput } from 'naive-ui';
-import { InjectionIhoTableEmits, InjectionIhoTableHandler } from '../../../../constants/index2.js';
+import { InjectionIhoTableEmits, InjectionIhoTableHandler } from '../../../../constants/index.js';
 import _export_sfc from '../../../../../../../_virtual/plugin-vue_export-helper.js';
 
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "edit-separate",
+  __name: "editSeparate",
   props: {
     value: {},
     height: { type: Number },
@@ -103,6 +103,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
   }
 });
-var EditSeparate = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "edit-separate.vue"]]);
+var EditSeparate = /* @__PURE__ */ _export_sfc(_sfc_main, [["__file", "editSeparate.vue"]]);
 
 export { EditSeparate as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/index.js

@@ -1,12 +1,12 @@
 import { reactive, inject, unref, createVNode, onBeforeUnmount } from 'vue';
-import { traverse } from '../../../../../../../shared/utils/index2.js';
+import { traverse } from '../../../../../../../shared/utils/index.js';
 import { isFunction } from 'lodash-es';
-import '../../../../../index2.js';
-import { INPUT_TYPE, InjectionIhoTableUUID } from '../../../../constants/index2.js';
-import { getRowHeight } from '../../../../utils/index2.js';
-import { isSeparateColumn, getColumnRenderWidth, contentSeparate, getColumnInfoMaxLength, generateSeparateRowData } from './separate-utils2.js';
-import EditSeparate from './edit-separate.js';
-import { defineTablePlugin } from '../../../../hooks/useTablePlugin2.js';
+import '../../../../../index.js';
+import { EDITABLE_WIDGET_TYPE, InjectionIhoTableUUID } from '../../../../constants/index.js';
+import { getRowHeight } from '../../../../utils/index.js';
+import { isSeparateColumn, getColumnRenderWidth, contentSeparate, getColumnInfoMaxLength, generateSeparateRowData } from './separateUtils.js';
+import EditSeparate from './editSeparate.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
 
 function separateRendererPlugins() {
   const pluginName = "separateRendererPlugins";
@@ -24,7 +24,7 @@ function separateRendererPlugins() {
   return defineTablePlugin({
     name: pluginName,
     vxe(instance) {
-      instance.renderer.add(INPUT_TYPE.SEPARATE, {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.SEPARATE, {
         renderCell(renderOpts, {
           column,
           row

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/separateRendererPlugin/{separate-utils2.js → separateUtils.js}

@@ -1,7 +1,7 @@
-import { getStringWidth } from '../../../../../../../shared/utils/index2.js';
+import { getStringWidth } from '../../../../../../../shared/utils/index.js';
 import { isNumber, isArray, cloneDeep, isString } from 'lodash-es';
 import { nextTick, unref } from 'vue';
-import { INPUT_TYPE } from '../../../../constants/index2.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
 
 function getColumnInfoMaxLength(parsedRowDataInfo) {
   return Math.max(...parsedRowDataInfo.map((r) => r.data.length), 1);
@@ -36,19 +36,22 @@ function contentSeparate(value, field, width) {
   if (!isString(value) || !isNumber(width))
     return [value];
   width -= 24;
-  return [...value].reduce((res, char) => {
-    const latestString = res[res.length - 1];
-    if (getStringWidth(latestString + char) > width) {
-      res.push(char);
-    } else {
-      res[res.length - 1] = latestString + char;
-    }
-    return res;
-  }, [""]);
+  return [...value].reduce(
+    (res, char) => {
+      const latestString = res[res.length - 1];
+      if (getStringWidth(latestString + char) > width) {
+        res.push(char);
+      } else {
+        res[res.length - 1] = latestString + char;
+      }
+      return res;
+    },
+    [""]
+  );
 }
 function isSeparateColumn(field) {
   var _a;
-  return field.field && ((_a = field.editRender) == null ? void 0 : _a.name) === INPUT_TYPE.SEPARATE;
+  return field.field && ((_a = field.editRender) == null ? void 0 : _a.name) === EDITABLE_WIDGET_TYPE.SEPARATE;
 }
 
 export { contentSeparate, generateSeparateRowData, getColumnInfoMaxLength, getColumnRenderWidth, isSeparateColumn };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/editTime.d.ts

@@ -0,0 +1,31 @@
+import { PropType } from 'vue';
+import { IhoTableFieldItem } from '../../../../../../../../es/components/iho-table';
+import { AnyObject } from '../../../../../../../../es/shared/types';
+declare const _default: import("vue").DefineComponent<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}, () => JSX.Element, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    column: {
+        type: PropType<IhoTableFieldItem>;
+        required: true;
+    };
+    row: {
+        type: PropType<AnyObject>;
+        required: true;
+    };
+    index: {
+        type: NumberConstructor;
+        required: true;
+    };
+}>>, {}>;
+export default _default;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/editTime.js

@@ -0,0 +1,60 @@
+import { defineComponent, inject, createVNode, mergeProps } from 'vue';
+import { NTimePicker } from 'naive-ui';
+import { InjectionIhoTableEmits } from '../../../../constants/index.js';
+import { useCommon } from '../hooks/useCommon.js';
+
+var EditTime = defineComponent({
+  name: "EditTime",
+  inheritAttrs: false,
+  components: {
+    NTimePicker
+  },
+  props: {
+    column: {
+      type: Object,
+      required: true
+    },
+    row: {
+      type: Object,
+      required: true
+    },
+    index: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(props, {
+    attrs,
+    emit
+  }) {
+    const globEmit = inject(InjectionIhoTableEmits);
+    const {
+      formRef,
+      isShow
+    } = useCommon();
+    const onUpdateValue = (value) => {
+      globEmit("formChange", {
+        value,
+        row: props.row,
+        column: props.column,
+        index: props.index
+      });
+    };
+    const timeConfig = {
+      placeholder: attrs.placeholder || "\u8BF7\u9009\u62E9",
+      valueFormat: attrs.valueFormat || "HH:mm",
+      format: attrs.valueFormat || "yyyy-MM-dd HH:mm:ss",
+      ...attrs,
+      onUpdateFormattedValue: onUpdateValue
+    };
+    return () => createVNode(NTimePicker, mergeProps({
+      "ref": formRef,
+      "show": isShow.value,
+      "onUpdate:show": ($event) => isShow.value = $event,
+      "formattedValue": props.row[props.column.field],
+      "onUpdate:formattedValue": ($event) => props.row[props.column.field] = $event
+    }, timeConfig), null);
+  }
+});
+
+export { EditTime as default };

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/index.d.ts

@@ -0,0 +1 @@
+export declare function timeRendererPlugin(): import("../../../../../../../../es/components/iho-table").TablePlugin;

package/es/components/iho-table/src/plugins/rendererPlugins/editableWidgets/timeRendererPlugin/index.js

@@ -0,0 +1,39 @@
+import { createVNode, mergeProps } from 'vue';
+import '../../../../../index.js';
+import { EDITABLE_WIDGET_TYPE } from '../../../../constants/index.js';
+import EditTime from './editTime.js';
+import { defineTablePlugin } from '../../../../hooks/useTablePlugin.js';
+
+function timeRendererPlugin() {
+  const pluginName = "timeRendererPlugin";
+  return defineTablePlugin({
+    name: pluginName,
+    vxe(instance) {
+      instance.renderer.add(EDITABLE_WIDGET_TYPE.TIME, {
+        renderCell({
+          props
+        }, {
+          row,
+          column
+        }) {
+          return [createVNode("span", null, [row[column.field]])];
+        },
+        renderEdit({
+          props
+        }, {
+          row,
+          column,
+          $rowIndex
+        }) {
+          return [createVNode(EditTime, mergeProps((props == null ? void 0 : props.componentProps) || {}, {
+            "column": column,
+            "row": row,
+            "index": $rowIndex
+          }), null)];
+        }
+      });
+    }
+  });
+}
+
+export { timeRendererPlugin };

package/es/components/iho-table/src/plugins/rendererPlugins/index.js

@@ -6,3 +6,6 @@ export { checkRendererPlugin } from './widgets/checkRendererPlugin.js';
 export { pictureRendererPlugin } from './widgets/pictureRendererPlugin.js';
 export { inputRendererPlugin } from './editableWidgets/inputRendererPlugin.js';
 export { separateRendererPlugins } from './editableWidgets/separateRendererPlugin/index.js';
+export { selectRendererPlugin } from './editableWidgets/selectRendererPlugin/index.js';
+export { dateRendererPlugin } from './editableWidgets/dateRendererPlugin/index.js';
+export { timeRendererPlugin } from './editableWidgets/timeRendererPlugin/index.js';

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/checkRendererPlugin.js

@@ -1,5 +1,5 @@
-import '../../../../index2.js';
-import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
+import '../../../../index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
 
 function checkRendererPlugin() {
   const pluginName = "checkRendererPlugin";
@@ -16,6 +16,8 @@ function checkRendererPlugin() {
         if (index === 0 && config.selectType) {
           insertBefore({
             field: pluginName,
+            width: 50,
+            align: "center",
             type: config.selectType
           });
         }

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/colorRendererPlugin.js

@@ -1,8 +1,8 @@
 import { createVNode } from 'vue';
-import '../../../../index2.js';
-import { WIDGET_TYPE } from '../../../constants/index2.js';
-import { getRowHeight } from '../../../utils/index2.js';
-import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
+import '../../../../index.js';
+import { WIDGET_TYPE } from '../../../constants/index.js';
+import { getRowHeight } from '../../../utils/index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
 
 function colorRendererPlugin() {
   const pluginName = "checkRendererPlugin";

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/defaultRendererPlugin.js

@@ -1,9 +1,9 @@
 import { createVNode } from 'vue';
 import { isString } from 'lodash-es';
-import '../../../../index2.js';
-import { WIDGET_TYPE } from '../../../constants/index2.js';
-import { IhoTableWarn } from '../../../utils/index2.js';
-import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
+import '../../../../index.js';
+import { WIDGET_TYPE } from '../../../constants/index.js';
+import { IhoTableWarn } from '../../../utils/index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
 
 function defaultRendererPlugin() {
   const pluginName = "defaultRendererPlugin";

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/labelRendererPlugin.js

@@ -1,8 +1,8 @@
 import { createVNode } from 'vue';
 import { isArray, isString } from 'lodash-es';
-import '../../../../index2.js';
-import { WIDGET_TYPE } from '../../../constants/index2.js';
-import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
+import '../../../../index.js';
+import { WIDGET_TYPE } from '../../../constants/index.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
 
 function labelRendererPlugin() {
   const pluginName = "labelRendererPlugin";
@@ -15,6 +15,8 @@ function labelRendererPlugin() {
           column
         }) {
           try {
+            if (!row[column.field])
+              return [];
             const value = JSON.parse(row[column.field]);
             const labels = isArray(value.labels) ? value.labels : parseLabelString(value.labelStr);
             return labels.map(renderLabelItem);

package/es/components/iho-table/src/plugins/rendererPlugins/widgets/pictureRendererPlugin.js

@@ -1,11 +1,11 @@
 import { defineComponent, watch, onBeforeUnmount, createVNode } from 'vue';
-import { arrayed } from '../../../../../../shared/utils/index2.js';
-import '../../../../index2.js';
-import { WIDGET_TYPE } from '../../../constants/index2.js';
-import { getRowHeight, IhoTableWarn } from '../../../utils/index2.js';
+import { arrayed } from '../../../../../../shared/utils/index.js';
+import '../../../../index.js';
+import { WIDGET_TYPE } from '../../../constants/index.js';
+import { getRowHeight, IhoTableWarn } from '../../../utils/index.js';
 import Viewer from 'viewerjs';
 import 'viewerjs/dist/viewer.css';
-import { defineTablePlugin } from '../../../hooks/useTablePlugin2.js';
+import { defineTablePlugin } from '../../../hooks/useTablePlugin.js';
 
 function pictureRendererPlugin() {
   const pluginName = "pictureRendererPlugin";
@@ -19,8 +19,10 @@ function pictureRendererPlugin() {
             column
           }) {
             try {
+              if (!row[column.field])
+                return [];
               const value = JSON.parse(row[column.field]);
-              const height = getRowHeight();
+              const height = getRowHeight() - 16;
               return [createVNode("section", {
                 "style": "display:flex;justify-content:center"
               }, [createVNode(ViewerImage, {