@ibiz-template/vue3-components 0.4.6 → 0.4.8-dev.0

package/es/editor/text-box/ibiz-input-number/ibiz-input-number.mjs

@@ -1,90 +0,0 @@
-import { ref, watch, resolveComponent, createVNode, defineComponent } from 'vue';
-import { getInputNumberProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
-import './ibiz-input-number.css';
-
-"use strict";
-const IBizInputNumber = /* @__PURE__ */ defineComponent({
-  name: "IBizInputNumber",
-  props: getInputNumberProps(),
-  emits: getEditorEmits(),
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace("input-number");
-    const c = props.controller;
-    const currentVal = ref("");
-    watch(() => props.value, (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        const number = Number(newVal);
-        currentVal.value = Number.isNaN(number) ? "" : number;
-      }
-    }, {
-      immediate: true
-    });
-    const handleChange = (e) => {
-      emit("change", e);
-    };
-    const inputRef = ref();
-    if (props.autoFocus) {
-      watch(inputRef, (newVal) => {
-        if (newVal) {
-          const input = newVal.$el.getElementsByTagName("input")[0];
-          input.focus();
-        }
-      });
-    }
-    const onFocus = (e) => {
-      emit("focus", e);
-    };
-    const onBlur = (e) => {
-      emit("blur", e);
-    };
-    const handleKeyUp = (e) => {
-      if (e && e.code === "Enter") {
-        emit("enter", e);
-      }
-    };
-    return {
-      ns,
-      c,
-      currentVal,
-      handleChange,
-      inputRef,
-      onFocus,
-      onBlur,
-      handleKeyUp
-    };
-  },
-  render() {
-    const {
-      unitName
-    } = this.c.parent;
-    let content = null;
-    if (this.readonly) {
-      content = `${this.currentVal}`;
-      if (content && unitName) {
-        content += unitName;
-      }
-    } else {
-      content = [createVNode(resolveComponent("el-input-number"), {
-        "ref": "inputRef",
-        "modelValue": this.currentVal,
-        "onUpdate:modelValue": ($event) => this.currentVal = $event,
-        "placeholder": this.c.placeHolder,
-        "precision": this.c.precision,
-        "disabled": this.disabled,
-        "onChange": this.handleChange,
-        "onFocus": this.onFocus,
-        "onBlur": this.onBlur,
-        "onKeyup": this.handleKeyUp
-      }, null), unitName && createVNode("i", {
-        "class": this.ns.e("unit")
-      }, [unitName])];
-    }
-    return createVNode("div", {
-      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
-    }, [content]);
-  }
-});
-
-export { IBizInputNumber };

package/es/editor/text-box/index.mjs

@@ -1,7 +0,0 @@
-export { IBizInput } from './input/input.mjs';
-export { IBizInputNumber } from './ibiz-input-number/ibiz-input-number.mjs';
-export { IBizInputIP } from './ibiz-input-ip/ibiz-input-ip.mjs';
-export { TextBoxEditorController } from './text-box-editor.controller.mjs';
-export { TextBoxEditorProvider } from './text-box-editor.provider.mjs';
-
-"use strict";

package/es/editor/text-box/input/input.css

@@ -1 +0,0 @@
-.ibiz-input{height:100%;font-size:var(--ibiz-form-item-font-size);font-weight:var(--ibiz-form-item-regular);--ibiz-input-min-height:var(--ibiz-editor-default-line-height)}.ibiz-input__ai-chat{position:absolute;right:10px;bottom:10px;width:36px;height:36px;padding:8px;font-size:18px;color:var(--ibiz-color-primary-text);cursor:pointer;background-color:var(--ibiz-color-primary);border-radius:15px}.ibiz-input__ai-chat:hover{color:var(--ibiz-color-primary-hover-text);background-color:var(--ibiz-color-primary-hover)}.ibiz-input .el-input .el-input__inner{height:100%}.ibiz-input .el-input .el-input__inner::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-input .el-input .el-input__inner::placeholder{color:var(--ibiz-form-item-placeholder-color)}.ibiz-input .el-textarea .el-textarea__inner{height:100%}.ibiz-input .el-textarea .el-textarea__inner::-moz-placeholder{color:var(--ibiz-form-item-placeholder-color);word-break:break-word;white-space:pre-wrap}.ibiz-input .el-textarea .el-textarea__inner::placeholder{color:var(--ibiz-form-item-placeholder-color);word-break:break-word;white-space:pre-wrap}.ibiz-input .ibiz-input-input{height:100%;min-height:var(--ibiz-input-min-height)}.ibiz-input--readonly{height:auto;line-height:var(--ibiz-input-min-height);color:var(--ibiz-form-item-readonly-color)}.ibiz-input .el-input__suffix .ibiz-input__unit{font-style:normal}

package/es/editor/text-box/input/input.mjs

@@ -1,274 +0,0 @@
-import { isVNode, ref, computed, watch, onUnmounted, createVNode, resolveComponent, defineComponent } from 'vue';
-import { debounce } from 'lodash-es';
-import { getInputProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
-import { createUUID } from 'qx-util';
-import './input.css';
-
-"use strict";
-function _isSlot(s) {
-  return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
-}
-const IBizInput = /* @__PURE__ */ defineComponent({
-  name: "IBizInput",
-  props: getInputProps(),
-  emits: getEditorEmits(),
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace("input");
-    const c = props.controller;
-    const editorModel = c.model;
-    const inputRef = ref();
-    const rows = ref(2);
-    if (editorModel.editorType === "TEXTAREA_10") {
-      rows.value = 10;
-    }
-    const type = computed(() => {
-      switch (editorModel.editorType) {
-        case "TEXTBOX":
-          return "text";
-        case "PASSWORD":
-          return "password";
-        case "TEXTAREA":
-        case "TEXTAREA_10":
-          return "textarea";
-        default:
-          return "string";
-      }
-    });
-    const currentVal = ref("");
-    watch(() => props.value, (newVal, oldVal) => {
-      if (newVal !== oldVal) {
-        if (newVal == null) {
-          currentVal.value = "";
-        } else {
-          currentVal.value = newVal.toString();
-        }
-      }
-    }, {
-      immediate: true
-    });
-    let isDebounce = false;
-    let awaitSearch;
-    let blurCacheValue;
-    const debounceChange = debounce((val) => {
-      if (blurCacheValue !== val) {
-        emit("change", val);
-      }
-      blurCacheValue = void 0;
-      isDebounce = false;
-      if (awaitSearch) {
-        awaitSearch();
-      }
-    }, 300, {
-      leading: true
-    });
-    const handleChange = (val) => {
-      isDebounce = true;
-      debounceChange(val);
-    };
-    const handleKeyUp = (e) => {
-      if (e && e.code === "Enter") {
-        emit("enter", e);
-        if (isDebounce) {
-          awaitSearch = () => {
-            inputRef.value.$el.dispatchEvent(e);
-          };
-        }
-      }
-    };
-    const onBlur = (event) => {
-      blurCacheValue = event.target.value;
-      if (blurCacheValue != props.value) {
-        emit("change", blurCacheValue);
-      }
-      emit("blur", event);
-    };
-    if (props.autoFocus) {
-      watch(inputRef, (newVal) => {
-        if (newVal) {
-          const inputTag = type.value === "textarea" ? "textarea" : "input";
-          const input = newVal.$el.getElementsByTagName(inputTag)[0];
-          input.focus();
-        }
-      });
-    }
-    const onFocus = (e) => {
-      emit("focus", e);
-    };
-    let chatInstance;
-    const onClick = async () => {
-      var _a;
-      if (c.deService) {
-        const module = await import('@ibiz-template-plugin/ai-chat');
-        const chat = module.chat || module.default.chat;
-        chatInstance = chat;
-        const aiChat = chat.create({
-          question: async (arr) => {
-            var _a2;
-            const id = createUUID();
-            await ((_a2 = c.deService) == null ? void 0 : _a2.aiChatSse((msg) => {
-              ibiz.log.info("aiChatSse", msg);
-              if (msg.actionstate === 20 && msg.actionresult) {
-                aiChat.addMessage({
-                  messageid: id,
-                  state: msg.actionstate,
-                  type: "DEFAULT",
-                  role: "ASSISTANT",
-                  content: msg.actionresult
-                });
-              } else if (msg.actionstate === 30 && msg.actionresult) {
-                const result = JSON.parse(msg.actionresult);
-                const choices = result.choices;
-                if (choices && choices.length > 0) {
-                  aiChat.replaceMessage({
-                    messageid: id,
-                    state: msg.actionstate,
-                    type: "DEFAULT",
-                    role: "ASSISTANT",
-                    content: choices[0].content || ""
-                  });
-                }
-              } else if (msg.actionstate === 40) {
-                aiChat.replaceMessage({
-                  messageid: id,
-                  state: msg.actionstate,
-                  type: "ERROR",
-                  role: "ASSISTANT",
-                  content: msg.actionresult
-                });
-              }
-            }, c.context, {}, {
-              messages: arr
-            }));
-            aiChat.addMessage({
-              messageid: id,
-              state: 10,
-              type: "DEFAULT",
-              role: "ASSISTANT",
-              content: ""
-            });
-            return true;
-          },
-          action: (action, message) => {
-            if (action === "backfill") {
-              handleChange(message.content);
-            }
-          }
-        });
-        const res = await ((_a = c.deService) == null ? void 0 : _a.aiChatHistory(c.context, {}));
-        if (res.data && Array.isArray(res.data)) {
-          res.data.forEach((item) => {
-            const msg = {
-              messageid: createUUID(),
-              state: 30,
-              type: "DEFAULT",
-              role: item.role,
-              content: item.content
-            };
-            aiChat.addMessage(msg);
-          });
-        }
-      }
-    };
-    onUnmounted(() => {
-      if (chatInstance) {
-        chatInstance.close();
-      }
-    });
-    const readonlyText = computed(() => {
-      const {
-        unitName
-      } = props.controller.parent;
-      let text = `${currentVal.value}`;
-      if (text && unitName) {
-        text += unitName;
-      }
-      return text;
-    });
-    const shouldAutoComplete = computed(() => {
-      return c.model.editorParams && c.model.editorParams.autocomplete && c.toBoolean(c.model.editorParams.autocomplete) ? "on" : "new-password";
-    });
-    return {
-      c,
-      ns,
-      rows,
-      type,
-      currentVal,
-      readonlyText,
-      handleChange,
-      handleKeyUp,
-      onBlur,
-      onFocus,
-      inputRef,
-      onClick,
-      shouldAutoComplete
-    };
-  },
-  render() {
-    const {
-      unitName
-    } = this.c.parent;
-    const {
-      editorWidth,
-      editorHeight,
-      predefinedType
-    } = this.c.model;
-    let content = null;
-    if (this.readonly) {
-      content = this.readonlyText;
-    } else {
-      const slots = {};
-      if (unitName) {
-        slots.suffix = () => {
-          return createVNode("i", {
-            "class": this.ns.e("unit")
-          }, [unitName]);
-        };
-      }
-      if (predefinedType === "AUTH_USERID") {
-        slots.prefix = () => createVNode("ion-icon", {
-          "name": "person"
-        }, null);
-      } else if (predefinedType === "AUTH_PASSWORD") {
-        slots.prefix = () => createVNode("ion-icon", {
-          "name": "unlock-alt"
-        }, null);
-      }
-      content = createVNode(resolveComponent("el-input"), {
-        "ref": "inputRef",
-        "clearable": true,
-        "modelValue": this.currentVal,
-        "onUpdate:modelValue": ($event) => this.currentVal = $event,
-        "placeholder": this.c.placeHolder,
-        "type": this.type,
-        "rows": this.rows,
-        "resize": "none",
-        "onInput": this.handleChange,
-        "onKeyup": this.handleKeyUp,
-        "onBlur": this.onBlur,
-        "onFocus": this.onFocus,
-        "class": this.ns.b("input"),
-        "disabled": this.disabled,
-        "show-password": this.type === "password",
-        "autocomplete": this.shouldAutoComplete
-      }, _isSlot(slots) ? slots : {
-        default: () => [slots]
-      });
-    }
-    return createVNode("div", {
-      "class": [this.ns.b(), this.ns.is("textarea", Object.is(this.type, "textarea")), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""],
-      "style": {
-        width: editorWidth ? `${editorWidth}px` : "",
-        height: editorHeight ? `${editorHeight}px` : ""
-      }
-    }, [content, this.c.chatCompletion ? createVNode("div", {
-      "class": this.ns.e("ai-chat"),
-      "onClick": this.onClick
-    }, [createVNode("ion-icon", {
-      "src": "./assets/images/svg/chat.svg"
-    }, null)]) : null]);
-  }
-});
-
-export { IBizInput };

package/es/editor/text-box/text-box-editor.controller.mjs

@@ -1,127 +0,0 @@
-import { EditorController, getDeACMode } from '@ibiz-template/runtime';
-import { toNumber } from 'lodash-es';
-
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class TextBoxEditorController extends EditorController {
-  constructor() {
-    super(...arguments);
-    /**
-     * 精度
-     * @author lxm
-     * @date 2023-09-26 10:22:47
-     * @type {number}
-     */
-    __publicField(this, "precision");
-    /**
-     * 应用实体服务
-     *
-     * @author chitanda
-     * @date 2023-10-12 14:10:41
-     * @type {IAppDEService}
-     */
-    __publicField(this, "deService");
-    /**
-     * 自填模式
-     *
-     * @author chitanda
-     * @date 2023-10-12 10:10:52
-     * @type {IAppDEACMode}
-     */
-    __publicField(this, "deACMode");
-    /**
-     * 自填模式对应主键属性名称
-     *
-     * @author chitanda
-     * @date 2023-10-12 10:10:58
-     * @type {string}
-     */
-    __publicField(this, "keyName", "srfkey");
-    /**
-     * 自填模式对应主文本属性名称
-     *
-     * @author chitanda
-     * @date 2023-10-12 10:10:02
-     * @type {string}
-     */
-    __publicField(this, "textName", "srfmajortext");
-    /**
-     * 自填模式排序模式，默认升序
-     *
-     * @author chitanda
-     * @date 2023-10-12 10:10:29
-     * @type {string}
-     */
-    __publicField(this, "sort", "asc");
-    /**
-     * 自填数据项集合（已排除了value和text)
-     *
-     * @author chitanda
-     * @date 2023-10-12 10:10:23
-     * @type {IDEACModeDataItem[]}
-     */
-    __publicField(this, "dataItems", []);
-    /**
-     * AI 聊天自填模式
-     *
-     * @author chitanda
-     * @date 2023-10-12 10:10:37
-     * @type {boolean}
-     */
-    __publicField(this, "chatCompletion", false);
-  }
-  async onInit() {
-    await super.onInit();
-    this.precision = this.editorParams.precision ? toNumber(this.editorParams.precision) : this.model.precision;
-    if (this.model.editorType === "TEXTAREA" || this.model.editorType === "TEXTAREA_10") {
-      const model = this.model;
-      if (model.appDEACModeId) {
-        this.deACMode = await getDeACMode(
-          model.appDEACModeId,
-          model.appDataEntityId,
-          this.context.srfappid
-        );
-        if (this.deACMode) {
-          if (this.deACMode.actype === "AUTOCOMPLETE") {
-            const { minorSortAppDEFieldId, minorSortDir } = this.deACMode;
-            if (minorSortAppDEFieldId && minorSortDir) {
-              this.sort = `${minorSortAppDEFieldId.toLowerCase()},${minorSortDir.toLowerCase()}`;
-            }
-            if (this.deACMode.textAppDEFieldId) {
-              this.textName = this.deACMode.textAppDEFieldId;
-            }
-            if (this.deACMode.valueAppDEFieldId) {
-              this.keyName = this.deACMode.valueAppDEFieldId;
-            }
-            if (this.deACMode.deacmodeDataItems) {
-              this.dataItems = [];
-              this.deACMode.deacmodeDataItems.forEach(
-                (dataItem) => {
-                  if (dataItem.id !== "value" && dataItem.id !== "text") {
-                    this.dataItems.push(dataItem);
-                  }
-                }
-              );
-            }
-          }
-          if (this.deACMode.actype === "CHATCOMPLETION") {
-            this.deService = await ibiz.hub.getApp(model.appId).deService.getService(model.appDataEntityId);
-            this.chatCompletion = true;
-          }
-        }
-      }
-    }
-    if (this.model.predefinedType === "AUTH_USERID") {
-      this.placeHolder = "\u8BF7\u8F93\u5165\u8D26\u53F7";
-    } else if (this.model.predefinedType === "AUTH_PASSWORD") {
-      this.placeHolder = "\u8BF7\u8F93\u5165\u5BC6\u7801";
-    }
-  }
-}
-
-export { TextBoxEditorController };

package/es/editor/text-box/text-box-editor.provider.mjs

@@ -1,30 +0,0 @@
-import { TextBoxEditorController } from './text-box-editor.controller.mjs';
-
-"use strict";
-var __defProp = Object.defineProperty;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __publicField = (obj, key, value) => {
-  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
-  return value;
-};
-class TextBoxEditorProvider {
-  constructor(editorType) {
-    __publicField(this, "formEditor", "IBizInput");
-    __publicField(this, "gridEditor", "IBizInput");
-    if (editorType === "NUMBER") {
-      this.formEditor = "IBizInputNumber";
-      this.gridEditor = "IBizInputNumber";
-    }
-    if (editorType === "IPADDRESSTEXTBOX") {
-      this.formEditor = "IBizInputIP";
-      this.gridEditor = "IBizInputIP";
-    }
-  }
-  async createController(editorModel, parentController) {
-    const c = new TextBoxEditorController(editorModel, parentController);
-    await c.init();
-    return c;
-  }
-}
-
-export { TextBoxEditorProvider };

package/es/editor/upload/ibiz-file-upload/ibiz-file-upload.css

@@ -1 +0,0 @@
-.ibiz-file-upload{width:100%}.ibiz-file-upload .ibiz-file-upload-button span{font-size:var(--ibiz-form-item-font-size)}.ibiz-file-upload .el-upload-list{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:flex-start}.ibiz-file-upload .el-upload-list__item{display:flex;align-items:center;justify-content:flex-start;flex:0 0 auto}.ibiz-file-upload .el-upload-list__item .el-upload-list__item-info .el-upload-list__item-name{color:var(--ibiz-form-item-text-color)}.ibiz-file-upload .el-upload-list__item:hover{display:flex;align-items:center;justify-content:flex-start;background:var(--ibiz-form-item-disabled-bg-color)}.ibiz-file-upload .el-upload-list__item:hover span{color:var(--ibiz-form-item-text-color)}.ibiz-file-upload--disabled .el-upload-list__item>span{color:var(--ibiz-form-item-disabled-color)}.ibiz-file-upload--readonly .el-upload-list__item>span{color:var(--ibiz-form-item-readonly-color)}.ibiz-file-upload--readonly .ibiz-file-upload-button{display:none}.ibiz-file-upload-icon.is-not-show .el-upload--text{display:none}.ibiz-grid-field-edit-column__editor.ibiz-file-upload .ibiz-file-upload-icon{display:flex;flex-flow:column nowrap;align-items:center;justify-content:center}.ibiz-grid-field-edit-column__editor.ibiz-file-upload .ibiz-file-upload-icon .el-upload-list--text{width:100%}

package/es/editor/upload/ibiz-file-upload/ibiz-file-upload.mjs

@@ -1,81 +0,0 @@
-import { computed, resolveComponent, createTextVNode, createVNode, defineComponent } from 'vue';
-import { getUploadProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
-import './ibiz-file-upload.css';
-import { useIViewUpload } from '../use/use-iview-upload.mjs';
-
-"use strict";
-const IBizFileUpload = /* @__PURE__ */ defineComponent({
-  name: "IBizFileUpload",
-  props: getUploadProps(),
-  emits: getEditorEmits(),
-  setup(props, {
-    emit
-  }) {
-    const ns = useNamespace("file-upload");
-    const c = props.controller;
-    const {
-      uploadUrl,
-      headers,
-      files,
-      limit,
-      onDownload,
-      onError,
-      onRemove,
-      onSuccess,
-      beforeUpload
-    } = useIViewUpload(props, (value) => {
-      emit("change", value);
-    }, c);
-    const noUploadIcon = computed(() => {
-      var _a;
-      return limit.value === 1 && ((_a = files.value) == null ? void 0 : _a.length) === 1;
-    });
-    const isGridEditor = computed(() => {
-      return !!c.parent.model.columnType;
-    });
-    return {
-      ns,
-      c,
-      uploadUrl,
-      headers,
-      files,
-      limit,
-      noUploadIcon,
-      onDownload,
-      onError,
-      onRemove,
-      onSuccess,
-      beforeUpload,
-      isGridEditor
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": [this.ns.b(), this.disabled ? this.ns.m("disabled") : "", this.readonly ? this.ns.m("readonly") : ""]
-    }, [createVNode(resolveComponent("el-upload"), {
-      "class": [this.ns.b("icon"), this.ns.is("not-show", this.noUploadIcon)],
-      "file-list": this.files,
-      "action": this.uploadUrl,
-      "headers": this.headers,
-      "disabled": this.disabled,
-      "multiple": this.c.multiple,
-      "limit": this.limit,
-      "drag": !!this.c.isDrag,
-      "accept": this.c.accept,
-      "before-upload": this.beforeUpload,
-      "onSuccess": this.onSuccess,
-      "onError": this.onError,
-      "onRemove": this.onRemove,
-      "onPreview": this.onDownload
-    }, {
-      default: () => [this.noUploadIcon ? null : createVNode(resolveComponent("el-button"), {
-        "class": [this.ns.b("button")],
-        "size": this.isGridEditor ? "small" : "default"
-      }, {
-        default: () => [createTextVNode("\u4E0A\u4F20\u6587\u4EF6")]
-      })]
-    })]);
-  }
-});
-
-export { IBizFileUpload };

package/es/editor/upload/ibiz-image-preview/ibiz-image-preview.css

@@ -1 +0,0 @@
-.ibiz-image-preview{width:100%;height:100%;overflow:hidden}.ibiz-image-preview>.el-image{width:100%;height:100%}

package/es/editor/upload/ibiz-image-preview/ibiz-image-preview.mjs

@@ -1,32 +0,0 @@
-import { resolveComponent, createVNode, defineComponent } from 'vue';
-import { getUploadProps, getEditorEmits, useNamespace } from '@ibiz-template/vue3-util';
-import './ibiz-image-preview.css';
-
-"use strict";
-const IBizImagePreview = /* @__PURE__ */ defineComponent({
-  name: "IBizImagePreview",
-  props: getUploadProps(),
-  emits: getEditorEmits(),
-  setup(props) {
-    const ns = useNamespace("image-preview");
-    const c = props.controller;
-    return {
-      ns,
-      c
-    };
-  },
-  render() {
-    return createVNode("div", {
-      "class": [this.ns.b()],
-      "onClick": (e) => {
-        e.stopPropagation();
-      }
-    }, [createVNode(resolveComponent("el-image"), {
-      "fit": "contain",
-      "src": this.value,
-      "preview-src-list": [this.value]
-    }, null)]);
-  }
-});
-
-export { IBizImagePreview };

package/es/editor/upload/ibiz-image-upload/ibiz-image-upload.css

@@ -1 +0,0 @@
-@charset "UTF-8";.ibiz-image-upload{--ibiz-image-upload-box-width:120px;--ibiz-image-upload-box-height:120px;--ibiz-image-upload-list-item-margin:5px;--ibiz-image-upload-list-item-bg-color:var(--ibiz-bg-color);--ibiz-image-upload-list-item-border:1px solid var(--ibiz-border-color-light);--ibiz-image-upload-list-item-border-radius:var(--ibiz-border-radius-base);--ibiz-image-upload-list-item-box-shadow:var(--ibiz-box-shadow);--ibiz-image-upload-list-item-cover-bg-color:rgba(0, 0, 0, 0.6);--ibiz-image-upload-list-item-cover-i-color:var(--ibiz-color-white);--ibiz-image-upload-list-item-cover-i-size:var(--ibiz-font-size-extra-large);--ibiz-image-upload-list-item-cover-i-margin:0 2px;--ibiz-grid-image-upload-box-width:80px;--ibiz-grid-image-upload-box-height:32px;display:flex;align-items:center}.ibiz-image-upload .el-upload--picture-card{width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height)}.ibiz-image-upload__btn{width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height);line-height:var(--ibiz-image-upload-box-height)}.ibiz-image-upload__list-item{position:relative;display:inline-block;width:var(--ibiz-image-upload-box-width);height:var(--ibiz-image-upload-box-height);margin-right:var(--ibiz-image-upload-list-item-margin);line-height:var(--ibiz-image-upload-box-height);text-align:center;background:var(--ibiz-image-upload-list-item-bg-color);border:var(--ibiz-image-upload-list-item-border);border-radius:var(--ibiz-image-upload-list-item-border-radius);box-shadow:var(--ibiz-image-upload-list-item-box-shadow)}.ibiz-image-upload__list-item img{width:100%;height:100%;vertical-align:top;-o-object-fit:contain;object-fit:contain}.ibiz-image-upload__list-item:hover .ibiz-image-upload__list-item-cover{display:block}.ibiz-image-upload__list-item-cover{position:absolute;inset:0;display:none;background:var(--ibiz-image-upload-list-item-cover-bg-color)}.ibiz-image-upload__list-item-cover ion-icon{margin:var(--ibiz-image-upload-list-item-cover-i-margin);font-size:var(--ibiz-image-upload-list-item-cover-i-size);color:var(--ibiz-image-upload-list-item-cover-i-color);cursor:pointer}.ibiz-image-upload__list-item-cover img{width:100%;height:100%;vertical-align:top}.ibiz-image-upload__image-upload-add{font-size:var(--ibiz-font-size-header-2);color:var(--ibiz-color-text-3)}.ibiz-image-upload--disabled .ibiz-image-upload__download-icon{display:none}.ibiz-image-upload--disabled .ibiz-image-upload__remove-icon{display:none}.ibiz-image-upload--readonly .ibiz-image-upload__remove-icon{display:none}.ibiz-image-upload--readonly .el-upload--picture-card{display:none}.ibiz-image-upload-modal__img{width:100%}.ibiz-image-upload-icon.is-not-show{display:none}.ibiz-grid-field-edit-column__editor.ibiz-image-upload{flex-wrap:wrap}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .el-upload--picture-card{width:var(--ibiz-grid-image-upload-box-width);height:var(--ibiz-grid-image-upload-box-height)}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-upload__image-upload-list{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-upload__list-item{width:var(--ibiz-grid-image-upload-box-width);height:var(--ibiz-grid-image-upload-box-height);margin:var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) var(--ibiz-spacing-extra-tight) 0;line-height:var(--ibiz-grid-image-upload-box-height)}.ibiz-grid-field-edit-column__editor.ibiz-image-upload .ibiz-image-upload__list-item img{-o-object-fit:fill;object-fit:fill}