hisonvue 1.0.0

package/dist/HImagebox-D_DKeCrO.mjs

@@ -0,0 +1,654 @@
+import { defineComponent as Me, ref as a, computed as v, onMounted as Be, onBeforeUnmount as Le, watch as u, nextTick as J, resolveComponent as Ae, createElementBlock as T, openBlock as w, normalizeStyle as ne, normalizeClass as E, createElementVNode as K, withModifiers as U, renderSlot as j, createCommentVNode as xe, toDisplayString as O, createBlock as ze, withCtx as Q, Fragment as Ee, createVNode as ie } from "vue";
+import { E as Ne, y as b, g as Ve, l as N, u as Re, j as ae, t as X, h as m, e as Ue, a as je, b as se, r as Oe, c as He } from "./index-DUh7pai4.mjs";
+import { _ as qe } from "./_plugin-vue_export-helper-CHgC5LLL.mjs";
+const We = {
+  /**
+   * Unique identifier for the image box.
+   * - Use this for programmatic access: `hison.vue.getInput(id)`
+   * - Duplicated `id` values will throw an error at mount time.
+   *
+   * @example
+   * <HImagebox id="profilePic" />
+   */
+  id: { type: String, required: !1 },
+  /**
+   * Custom class string for responsive/layout/color/size.
+   * - Accepts any space-separated classes, such as `"size-xl color-warning"`
+   * - Supports hisonvue responsive prefixes.
+   */
+  class: {
+    type: [String, Array, Object],
+    required: !1
+  },
+  /**
+   * Inline style for the image box container.
+   * - Accepts a CSS string or a CSSProperties object.
+   * - Merged with internal dynamic styles.
+   *
+   * @example
+   * <HImagebox :style="{ margin: '8px', border: '1px solid #eee' }" />
+   */
+  style: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Custom style object or string applied to <img> element.
+   * Allows fine-grained control of image rendering.
+   */
+  imgStyle: {
+    type: [String, Object, Array],
+    required: !1
+  },
+  /**
+   * Controls visibility of the image box.
+   * - If false, the component is not displayed (`display: none`).
+   * - Can be toggled at runtime with imageboxMethods.setVisible().
+   *
+   * @default true
+   */
+  visible: { type: Boolean, default: !0 },
+  /**
+   * Edit mode of the image box.
+   * - `'editable'`: default, upload/remove buttons visible and enabled.
+   * - `'readonly'`: all buttons hidden (not rendered, layout preserved).
+   * - `'disable'`: buttons visible but disabled.
+   * - Can be changed at runtime using imageboxMethods.setEditMode().
+   *
+   * @default 'editable'
+   */
+  editMode: {
+    type: String,
+    default: b.editable,
+    validator: (t) => Ne.includes(t)
+  },
+  /**
+   * The current image data, bound via `v-model`.
+   *
+   * This prop holds the image information to be displayed and manipulated in the component.
+   * It accepts an `AttachedFileItem` object, supporting both:
+   * - Server-loaded files (from DB): with file metadata and URL.
+   * - Newly uploaded files: with native File object.
+   * 
+   * ### Usage
+   * - Set this prop to display an existing image from the server (use `filePath`).
+   * - When uploading, provide a new `AttachedFileItem` with a `File` object.
+   * - When `null`, the placeholder is displayed.
+   * - The component will emit `update:modelValue` with an updated value when the image is added or removed.
+   *
+   * ### AttachedFileItem Properties
+   * - `fileName`: string — Display name of the image file (with extension).
+   * - `fileSize`: number — File size in bytes (may be omitted for server files).
+   * - `extension`: string — File extension, such as `'jpg'`, `'png'`.
+   * - `file`: File — Native browser File object (for newly uploaded images).
+   * - `filePath`: string — URL or path to the image (for server files).
+   * - `fileId`: string — Optional unique identifier for server-provided images.
+   * - `isDeleted`: boolean — If true, image will not be shown (for soft-delete).
+   * - `isNew`: boolean — Marks if the image was just added (for upload tracking).
+   * - `attId`: string — (optional) Identifier for the attachment group (used for backend linking).
+   *
+   * :::note
+   * Use this prop for two-way binding with the parent state.  
+   * You can initialize the component with an image (server or uploaded),
+   * or clear it by setting to `null`.  
+   * Deleting a server-loaded image sets `isDeleted = true`; deleting a local-upload image sets `modelValue = null`.
+   * :::
+   *
+   * @example
+   * ```vue
+   * <HImagebox v-model="image" />
+   * 
+   * <script setup lang="ts">
+   * import type { AttachedFileItem } from 'hisonvue'
+   * import { ref } from 'vue'
+   * // Example with a preloaded image from server
+   * const image = ref<AttachedFileItem | null>({
+   *   fileId: 'IMG01',
+   *   fileName: 'avatar.jpg',
+   *   filePath: '/uploads/user/avatar.jpg',
+   *   fileSize: 34567,
+   *   extension: 'jpg',
+   *   isNew: false,
+   *   isDeleted: false,
+   * })
+   * // Or for a new upload:
+   * // const image = ref<AttachedFileItem | null>(null)
+   * <\/script>
+   * ```
+   */
+  modelValue: {
+    type: Object,
+    default: null
+  },
+  /**
+   * Identifier for the file group.
+   * Useful when linking this image to a specific attachment group in the backend.
+   */
+  attId: { type: String, default: "" },
+  /**
+   * Text label for the add/upload button.
+   * - If the `add-button` slot is provided, this prop is ignored.
+   * - Supports multiline (use '\\n', rendered as <br>).
+   *
+   * @default '+'
+   *
+   * @slot add-button
+   * Named slot to fully customize the add button.
+   * The slot receives `{ add }` as a prop, which triggers the file input dialog.
+   *
+   * @example
+   * <HImagebox>
+   *   <template #add-button="{ add }">
+   *     <span><i class="fa fa-plus"></i> Add Image</span>
+   *   </template>
+   * </HImagebox>
+   */
+  addButtonText: { type: String, default: "Add" },
+  /**
+   * Text label for the remove/delete button.
+   * - If the `remove-button` slot is provided, this prop is ignored.
+   * - Supports multiline (use '\\n', rendered as <br>).
+   *
+   * @default 'x'
+   *
+   * @slot remove-button
+   * Named slot to fully customize the remove button.
+   * The slot receives `{ remove }` as a prop.
+   *
+   * @example
+   * <HImagebox>
+   *   <template #remove-button="{ remove }">
+   *     <span><i class="fa fa-trash"></i> Delete</span>
+   *   </template>
+   * </HImagebox>
+   */
+  removeButtonText: { type: String, default: "Remove" },
+  /**
+   * Placeholder string shown when no image is present.
+   * - Displayed in the center of the preview area when modelValue is null or empty.
+   * - Use for instructional text or icons.
+   *
+   * @default 'There is no image'
+   *
+   * @notice
+   * If there is an empty slot, the placeholder will not appear.
+   * <HImagebox>
+   *  <template #empty>
+   *    <div class="custom-empty">
+   *      <span>Drag image here or click the button below</span>
+   *    </div>
+   *  </template>
+   * </HImagebox>
+   */
+  placeholder: { type: String, default: "There is no image" },
+  /**
+   * Whether to allow drag-and-drop file uploading.
+   * If false, users cannot drop files onto the image area.
+   *
+   * @default true
+   *
+   * @example
+   * <HImagebox :enableDrop="false" />
+   */
+  enableDrop: { type: Boolean, default: !0 },
+  /**
+   * Allowed file types/extensions for upload.
+   * - Accepts MIME types (`'image/png'`), wildcards (`'image/*'`), or extensions (`'.jpg'`).
+   * - String or array. String is split by comma.
+   * - If set, only listed types/extensions are accepted.
+   * - Takes priority over disallowedTypes.
+   *
+   * @default ['.jpg', '.jpeg', '.png', '.gif', 'image/*']
+   *
+   * @example
+   * <HImagebox allowedTypes=".jpg,.jpeg,.png" />
+   * <HImagebox :allowedTypes="['image/png', '.jpg']" />
+   */
+  allowedTypes: {
+    type: [String, Array],
+    default: () => [".jpg", ".jpeg", ".png", ".gif", "image/*"]
+  },
+  /**
+   * Disallowed file types/extensions for upload.
+   * - Accepts MIME types or extensions, as string (comma-separated) or array.
+   * - If allowedTypes is set, it takes precedence over this list.
+   * - Otherwise, any file NOT in this list will be accepted.
+   *
+   * :::note
+   * Comma-separated strings are automatically split into arrays.
+   * :::
+   *
+   * @default undefined
+   *
+   * @example
+   * <HImagebox disallowedTypes=".exe,.svg" />
+   * <HImagebox :disallowedTypes="['application/x-msdownload', '.bmp']" />
+   */
+  disallowedTypes: {
+    type: [String, Array],
+    default: void 0
+  },
+  /**
+   * Maximum allowed file size for the uploaded image (bytes).
+   * - `Infinity` means unlimited size.
+   * - Files exceeding this size will be rejected.
+   *
+   * @default Infinity
+   *
+   * @example
+   * <HImagebox :maxFileSize="2 * 1024 * 1024" /> <!-- 2MB -->
+   */
+  maxFileSize: { type: Number, default: 1 / 0 },
+  /**
+   * Whether to show border (rendered as subtle box-shadow).
+   * - Default: false (no border)
+   */
+  border: { type: Boolean, default: !1 },
+  /**
+   * Custom callback for disallowed file type or extension.
+   * - Called when a user selects a file that is not accepted.
+   * - Use to notify users about allowed formats.
+   *
+   * @param currentCheckFile - The file being checked.
+   * @param allowedTypes - Array of allowed types (or null).
+   * @param disallowedTypes - Array of disallowed types (or null).
+   *
+   * @example
+   * <HImagebox
+   *   :onDisallowedType="(file, allow, deny) => {
+   *     alert(`${file.name} is not allowed!`);
+   *   }"
+   * />
+   */
+  onDisallowedType: Function,
+  /**
+   * Custom callback for exceeding max file size.
+   * - Called when the selected file size is too large.
+   * - Use for user alerts or validation UI.
+   *
+   * @param file - The file being checked.
+   * @param size - The actual file size.
+   * @param max - The configured max size.
+   *
+   * @example
+   * <HImagebox
+   *   :onMaxFileSizeExceeded="(file, size, max) => alert('File too big!')"
+   * />
+   */
+  onMaxFileSizeExceeded: Function,
+  /**
+   * Controls keyboard focus order of the element.
+   * - `0` enables natural tab navigation, positive numbers set custom order.
+   * - `null` or `''` removes tabindex (not focusable).
+   */
+  tabIndex: {
+    type: [Number, String],
+    default: null,
+    validator: (t) => t === null || t === "" || !isNaN(+t) && isFinite(+t)
+  }
+}, Ge = Me({
+  name: "HImagebox",
+  props: We,
+  emits: [
+    "mounted",
+    "responsive-change",
+    "update:modelValue",
+    "add",
+    "remove",
+    "focus",
+    "blur",
+    "change",
+    "preview-click",
+    "preview-dblclick",
+    "preview-contextmenu",
+    "preview-pointerenter",
+    "preview-pointerleave",
+    "preview-pointerdown",
+    "preview-pointerup"
+  ],
+  setup(t, { emit: o }) {
+    const P = a(null), r = t.id ? t.id : Ve(), H = `himagebox:${r}`, d = a(null), g = a(t.visible), n = a(t.editMode), C = v(() => n.value === b.disable), q = v(() => n.value === b.readonly), I = a(t.border ?? !1), ue = v(() => n.value !== b.editable ? `hison-imagebox-${n.value}` : ""), re = v(() => g.value ? "" : "hison-display-none"), de = v(() => I.value ? "hison-border" : ""), V = a(t.attId || ""), W = a(!1), S = a(t.enableDrop), M = a(t.placeholder), B = a(t.addButtonText), L = a(t.removeButtonText), f = a(Array.isArray(t.allowedTypes) ? t.allowedTypes : t.allowedTypes ? t.allowedTypes.split(",") : []), p = a(Array.isArray(t.disallowedTypes) ? t.disallowedTypes : t.disallowedTypes ? t.disallowedTypes.split(",") : []), c = a(t.maxFileSize ?? N.getMaxFilesetSize()), y = a(typeof t.onDisallowedType == "function" ? t.onDisallowedType : void 0), $ = a(typeof t.onMaxFileSizeExceeded == "function" ? t.onMaxFileSizeExceeded : void 0), s = a(t.modelValue), R = a(!1), ve = v(() => {
+      if (f.value.length === 0) return "";
+      const e = new Set(p.value.map((i) => i.toLowerCase())), l = f.value.filter((i) => !e.has(i.toLowerCase()));
+      return l.length > 0 ? l.join(",") : void 0;
+    }), k = a(null), D = (e) => {
+      if (!e || e.isDeleted) {
+        k.value = null;
+        return;
+      }
+      if (e.filePath)
+        k.value = e.filePath;
+      else if (e.file instanceof File) {
+        const l = new FileReader();
+        l.onload = (i) => {
+          var x;
+          return k.value = String(((x = i.target) == null ? void 0 : x.result) || "");
+        }, l.readAsDataURL(e.file);
+      } else e.fileName && e.fileName.startsWith("data:") ? k.value = e.fileName : k.value = null;
+    };
+    D(s.value);
+    const h = (e, l) => {
+      o(e, { event: l, api: d.value });
+    }, me = (e) => h("preview-click", e), be = (e) => h("preview-dblclick", e), ge = (e) => h("preview-contextmenu", e), fe = (e) => h("preview-pointerenter", e), ce = (e) => h("preview-pointerleave", e), ye = (e) => h("preview-pointerdown", e), pe = (e) => h("preview-pointerup", e), A = a(
+      t.tabIndex !== null && t.tabIndex !== "" ? Number(t.tabIndex) : null
+    ), Y = Re(), F = a([]), G = () => {
+      F.value = Ue(X(t.class) || "", Y.value), je(F.value, "col") === -1 && F.value.push("hison-col-12"), se(F.value, "size", m.componentStyle.size), se(F.value, "color", "primary");
+    }, we = v(() => {
+      const e = [];
+      return e.push(...ae(X(t.class) || "", "size")), e.push(...ae(X(t.class) || "", "color")), e;
+    }), Ce = v(() => n.value !== b.readonly), De = v(() => !!s.value && n.value !== b.readonly), he = (e) => {
+      var x, le, oe;
+      const l = e.type, i = "." + ((x = e.name.split(".").pop()) == null ? void 0 : x.toLowerCase());
+      return f.value.length > 0 && !f.value.some((z) => z === l || z === i) ? (console.warn(`File type not in allowedTypes: ${l} / ${i}`), (le = y.value) == null || le.call(y, e, f.value, null), !1) : p.value.length > 0 && p.value.some((z) => z === l || z === i) ? (console.warn(`File type is in disallowedTypes: ${l} / ${i}`), (oe = y.value) == null || oe.call(y, e, null, p.value), !1) : !0;
+    }, Te = (e) => {
+      var l;
+      return typeof c.value == "number" && Number.isFinite(c.value) && e.size > c.value ? (console.warn(`File too large: ${e.name}
+Max size: ${c.value} Byte`), (l = $.value) == null || l.call($, e, e.size, c.value), !1) : !0;
+    }, Z = (e) => {
+      if (!he(e) || !Te(e)) return;
+      const l = e.name.split(".").pop() || "", i = {
+        fileName: e.name,
+        fileSize: e.size,
+        extension: l,
+        file: e,
+        isNew: !0
+      };
+      s.value = i, D(i), R.value = !0, o("update:modelValue", i), o("add", i, d.value), o("change", i, d.value);
+    }, Pe = (e) => {
+      if (n.value !== b.editable) return;
+      const l = e.target.files;
+      !l || !l.length || (Z(l[0]), J(() => {
+        P.value && (P.value.value = "");
+      }));
+    }, Se = (e) => {
+      !S.value || n.value !== b.editable || q.value || C.value || (W.value = !0);
+    }, $e = (e) => {
+      var l;
+      W.value = !1, !(!S.value || n.value !== b.editable) && (q.value || C.value || !((l = e.dataTransfer) != null && l.files) || !e.dataTransfer.files.length || Z(e.dataTransfer.files[0]));
+    }, ke = () => {
+      if (n.value !== b.editable) return;
+      const e = s.value;
+      e && e.file && !e.fileId ? s.value = null : e && e.fileId && (s.value = { ...e, isDeleted: !0 }), D(null), R.value = !0, o("update:modelValue", s.value), o("remove", e, d.value), o("change", s.value, d.value);
+    }, Fe = () => {
+      var e;
+      (e = P.value) == null || e.click();
+    }, _ = (e) => {
+      if (!e || !e.getIsDataModel || !e.getIsDataModel() || e.getRowCount() === 0) return;
+      const l = e.getRow(0);
+      s.value = l, D(l);
+    }, ee = () => {
+      m.component.imageboxList[r] && m.component.imageboxList[r].isHisonvueComponent && console.warn(`[Hisonvue] The imagebox ID is at risk of being duplicated. ${r}`), Oe(H, () => {
+        te(), J(ee);
+      }), P.value && (G(), d.value = {
+        isHisonvueComponent: !0,
+        getId: () => r,
+        getType: () => "imagebox",
+        isVisible: () => g.value,
+        setVisible: (e) => g.value = e,
+        getEditMode: () => n.value,
+        setEditMode: (e) => {
+          var l, i;
+          n.value = e, (l = m.component.buttonList[`hison_imagebox_add_button_${r}`]) == null || l.setDisable(C.value), (i = m.component.buttonList[`hison_imagebox_remove_button_${r}`]) == null || i.setDisable(C.value);
+        },
+        getValue: () => N.utils.deepCopyObject(s.value),
+        setValue: (e) => {
+          s.value = N.utils.deepCopyObject(e), D(e);
+        },
+        getDataModel: () => s.value ? new N.data.DataModel(s.value) : null,
+        setDataModel: (e) => {
+          _(e);
+        },
+        load: (e) => {
+          e && e.getIsDataModel && e.getIsDataModel() ? _(e) : s.value = N.utils.deepCopyObject(e);
+        },
+        getAttId: () => V.value,
+        setAttId: (e) => {
+          V.value = e;
+        },
+        getAddButtonText: () => B.value,
+        setAddButtonText: (e) => B.value = e,
+        getRemoveButtonText: () => L.value,
+        setRemoveButtonText: (e) => L.value = e,
+        getPlaceholder: () => M.value,
+        setPlaceholder: (e) => M.value = e,
+        isEnableDrop: () => S.value,
+        setEnableDrop: (e) => {
+          S.value = e;
+        },
+        getAllowedTypes: () => f.value,
+        setAllowedTypes: (e) => f.value = e,
+        getDisallowedTypes: () => p.value,
+        setDisallowedTypes: (e) => {
+          p.value = e;
+        },
+        getMaxFileSize: () => c.value,
+        setMaxFileSize: (e) => c.value = e,
+        setOnDisallowedType: (e) => {
+          y.value = e;
+        },
+        setOnMaxFileSizeExceeded: (e) => {
+          $.value = e;
+        },
+        isModified: () => R.value,
+        setModified: (e) => R.value = e,
+        isBorder: () => I.value,
+        setBorder: (e) => {
+          I.value = e;
+        },
+        getTabIndex: () => A.value,
+        setTabIndex: (e) => {
+          A.value = e != null ? Number(e) : null;
+        },
+        focus: () => {
+          var e;
+          (e = m.component.buttonList[`hison_imagebox_add_button_${r}`]) == null || e.focus();
+        },
+        reload: () => He(H)
+      }, m.component.imageboxList[r] = d.value, o("mounted", d.value));
+    }, te = () => {
+      delete m.component.imageboxList[r];
+    };
+    return Be(ee), Le(te), u(() => t.modelValue, (e) => {
+      e !== s.value && (s.value = e, D(e));
+    }), u(Y, (e) => {
+      G(), o("responsive-change", e);
+    }), u(() => t.visible, (e) => {
+      const l = !!e;
+      l !== g.value && (g.value = l);
+    }), u(() => t.editMode, (e) => {
+      e && e !== n.value && (n.value = e, J(() => {
+        var l, i;
+        (l = m.component.buttonList[`hison_imagebox_add_button_${r}`]) == null || l.setDisable(C.value), (i = m.component.buttonList[`hison_imagebox_remove_button_${r}`]) == null || i.setDisable(C.value);
+      }));
+    }), u(() => t.border, (e) => {
+      const l = !!e;
+      l !== I.value && (I.value = l);
+    }), u(() => t.attId, (e) => {
+      const l = e || "";
+      l !== V.value && (V.value = l);
+    }), u(() => t.allowedTypes, (e) => {
+      const l = Array.isArray(e) ? e : e ? String(e).split(",") : [];
+      l.toString() !== f.value.toString() && (f.value = l);
+    }), u(() => t.disallowedTypes, (e) => {
+      const l = Array.isArray(e) ? e : e ? String(e).split(",") : [];
+      l.toString() !== p.value.toString() && (p.value = l);
+    }), u(() => t.maxFileSize, (e) => {
+      const l = Number(e);
+      (Number.isFinite(l) || l === 1 / 0) && l !== c.value && (c.value = l);
+    }), u(() => t.onDisallowedType, (e) => {
+      const l = typeof e == "function" ? e : void 0;
+      l !== y.value && (y.value = l);
+    }), u(() => t.onMaxFileSizeExceeded, (e) => {
+      const l = typeof e == "function" ? e : void 0;
+      l !== $.value && ($.value = l);
+    }), u(() => t.placeholder, (e) => {
+      const l = e ?? "";
+      l !== M.value && (M.value = l);
+    }), u(() => t.addButtonText, (e) => {
+      const l = e ?? "";
+      l !== B.value && (B.value = l);
+    }), u(() => t.removeButtonText, (e) => {
+      const l = e ?? "";
+      l !== L.value && (L.value = l);
+    }), u(() => t.enableDrop, (e) => {
+      const l = !!e;
+      l !== S.value && (S.value = l);
+    }), u(() => t.modelValue, (e) => {
+      e !== s.value && (s.value = e, D(e));
+    }), u(() => t.tabIndex, (e) => {
+      const l = e === null || e === "" ? null : Number(e);
+      l !== A.value && (A.value = l);
+    }), u(() => t.class, () => {
+      G();
+    }), {
+      fileInputRef: P,
+      id: r,
+      props: t,
+      imgStyle: v(() => t.imgStyle || {}),
+      imageValue: s,
+      imageboxMethods: d,
+      visibleClass: re,
+      editModeClass: ue,
+      borderClass: de,
+      responsiveClassList: F,
+      buttonClassList: we,
+      disable: C,
+      readonly: q,
+      addButtonText: B,
+      removeButtonText: L,
+      placeholder: M,
+      isDragging: W,
+      previewUrl: k,
+      showAddButton: Ce,
+      showRemoveButton: De,
+      accept: ve,
+      tabIndex: A,
+      handleDragEnter: Se,
+      handleDrop: $e,
+      openFileDialog: Fe,
+      removeImage: ke,
+      onFileChange: Pe,
+      onPreviewClick: me,
+      onPreviewDblClick: be,
+      onPreviewContextMenu: ge,
+      onPreviewPointerEnter: fe,
+      onPreviewPointerLeave: ce,
+      onPreviewPointerDown: ye,
+      onPreviewPointerUp: pe
+    };
+  }
+}), Je = ["src"], Ke = { class: "img-placeholder" }, Qe = {
+  key: 2,
+  class: "imgbox-btn-row"
+}, Xe = {
+  key: 1,
+  class: "hison-imagebox-add-text"
+}, Ye = {
+  key: 1,
+  class: "hison-imagebox-add-text"
+}, Ze = {
+  key: 1,
+  class: "hison-imagebox-remove-text"
+}, _e = ["id", "accept"];
+function et(t, o, P, r, H, d) {
+  const g = Ae("HButton");
+  return w(), T("div", {
+    class: E([
+      "hison-imagebox",
+      ...t.responsiveClassList,
+      t.visibleClass,
+      t.borderClass,
+      t.editModeClass
+    ]),
+    style: ne(t.props.style)
+  }, [
+    K("div", {
+      class: E(["img-preview", { "drag-over": t.isDragging }]),
+      onDragover: o[11] || (o[11] = U(() => {
+      }, ["prevent"])),
+      onDragenter: o[12] || (o[12] = U((...n) => t.handleDragEnter && t.handleDragEnter(...n), ["prevent"])),
+      onDragleave: o[13] || (o[13] = U((n) => t.isDragging = !1, ["prevent"])),
+      onDrop: o[14] || (o[14] = U((...n) => t.handleDrop && t.handleDrop(...n), ["prevent"]))
+    }, [
+      t.previewUrl ? (w(), T("img", {
+        key: 0,
+        src: t.previewUrl,
+        class: "preview-img",
+        style: ne([t.imgStyle]),
+        onClick: o[0] || (o[0] = (...n) => t.onPreviewClick && t.onPreviewClick(...n)),
+        onDblclick: o[1] || (o[1] = (...n) => t.onPreviewDblClick && t.onPreviewDblClick(...n)),
+        onContextmenu: o[2] || (o[2] = (...n) => t.onPreviewContextMenu && t.onPreviewContextMenu(...n)),
+        onPointerenter: o[3] || (o[3] = (...n) => t.onPreviewPointerEnter && t.onPreviewPointerEnter(...n)),
+        onPointerleave: o[4] || (o[4] = (...n) => t.onPreviewPointerLeave && t.onPreviewPointerLeave(...n)),
+        onPointerdown: o[5] || (o[5] = (...n) => t.onPreviewPointerDown && t.onPreviewPointerDown(...n)),
+        onPointerup: o[6] || (o[6] = (...n) => t.onPreviewPointerUp && t.onPreviewPointerUp(...n))
+      }, null, 44, Je)) : j(t.$slots, "empty", { key: 1 }, () => [
+        K("div", Ke, O(t.placeholder), 1)
+      ]),
+      t.readonly ? xe("", !0) : (w(), T("div", Qe, [
+        t.imageValue ? (w(), T(Ee, { key: 1 }, [
+          ie(g, {
+            id: `hison_imagebox_add_button_${t.id}`,
+            disable: t.disable,
+            class: E(["hison-col-6", ...t.buttonClassList]),
+            onClick: t.openFileDialog,
+            onFocus: o[9] || (o[9] = (n) => t.$emit("focus", t.imageboxMethods)),
+            onBlur: o[10] || (o[10] = (n) => t.$emit("blur", t.imageboxMethods))
+          }, {
+            default: Q(() => [
+              t.$slots["add-button"] ? j(t.$slots, "add-button", {
+                key: 0,
+                add: t.openFileDialog
+              }) : (w(), T("span", Ye, O(t.addButtonText), 1))
+            ]),
+            _: 3
+          }, 8, ["id", "disable", "class", "onClick"]),
+          ie(g, {
+            id: `hison_imagebox_remove_button_${t.id}`,
+            disable: t.disable,
+            class: E(["hison-col-6", ...t.buttonClassList]),
+            onClick: t.removeImage
+          }, {
+            default: Q(() => [
+              t.$slots["remove-button"] ? j(t.$slots, "remove-button", {
+                key: 0,
+                remove: t.removeImage
+              }) : (w(), T("span", Ze, O(t.removeButtonText), 1))
+            ]),
+            _: 3
+          }, 8, ["id", "disable", "class", "onClick"])
+        ], 64)) : (w(), ze(g, {
+          key: 0,
+          id: `hison_imagebox_add_button_${t.id}`,
+          disable: t.disable,
+          class: E(["hison-col-12", ...t.buttonClassList]),
+          tabindex: t.tabIndex ?? void 0,
+          onClick: t.openFileDialog,
+          onFocus: o[7] || (o[7] = (n) => t.$emit("focus", t.imageboxMethods)),
+          onBlur: o[8] || (o[8] = (n) => t.$emit("blur", t.imageboxMethods))
+        }, {
+          default: Q(() => [
+            t.$slots["add-button"] ? j(t.$slots, "add-button", {
+              key: 0,
+              add: t.openFileDialog
+            }) : (w(), T("span", Xe, O(t.addButtonText), 1))
+          ]),
+          _: 3
+        }, 8, ["id", "disable", "class", "tabindex", "onClick"]))
+      ]))
+    ], 34),
+    K("input", {
+      id: `hison_imagebox_${t.id}`,
+      ref: "fileInputRef",
+      type: "file",
+      accept: t.accept || void 0,
+      multiple: !1,
+      hidden: "",
+      onChange: o[15] || (o[15] = (...n) => t.onFileChange && t.onFileChange(...n))
+    }, null, 40, _e)
+  ], 6);
+}
+const nt = /* @__PURE__ */ qe(Ge, [["render", et]]);
+export {
+  nt as default
+};

package/dist/HImagebox-t_UdFjQO.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("vue"),a=require("./index-BmKMHsSZ.js"),me=require("./_plugin-vue_export-helper-BHFhmbuH.js"),ce={id:{type:String,required:!1},class:{type:[String,Array,Object],required:!1},style:{type:[String,Object,Array],required:!1},imgStyle:{type:[String,Object,Array],required:!1},visible:{type:Boolean,default:!0},editMode:{type:String,default:a.EditMode.editable,validator:t=>a.EDIT_MODE_VALUES.includes(t)},modelValue:{type:Object,default:null},attId:{type:String,default:""},addButtonText:{type:String,default:"Add"},removeButtonText:{type:String,default:"Remove"},placeholder:{type:String,default:"There is no image"},enableDrop:{type:Boolean,default:!0},allowedTypes:{type:[String,Array],default:()=>[".jpg",".jpeg",".png",".gif","image/*"]},disallowedTypes:{type:[String,Array],default:void 0},maxFileSize:{type:Number,default:1/0},border:{type:Boolean,default:!1},onDisallowedType:Function,onMaxFileSizeExceeded:Function,tabIndex:{type:[Number,String],default:null,validator:t=>t===null||t===""||!isNaN(+t)&&isFinite(+t)}},fe=o.defineComponent({name:"HImagebox",props:ce,emits:["mounted","responsive-change","update:modelValue","add","remove","focus","blur","change","preview-click","preview-dblclick","preview-contextmenu","preview-pointerenter","preview-pointerleave","preview-pointerdown","preview-pointerup"],setup(t,{emit:n}){const y=o.ref(null),u=t.id?t.id:a.getUUID(),x=`himagebox:${u}`,d=o.ref(null),v=o.ref(t.visible),i=o.ref(t.editMode),b=o.computed(()=>i.value===a.EditMode.disable),z=o.computed(()=>i.value===a.EditMode.readonly),T=o.ref(t.border??!1),q=o.computed(()=>i.value!==a.EditMode.editable?`hison-imagebox-${i.value}`:""),W=o.computed(()=>v.value?"":"hison-display-none"),G=o.computed(()=>T.value?"hison-border":""),F=o.ref(t.attId||""),L=o.ref(!1),h=o.ref(t.enableDrop),k=o.ref(t.placeholder),M=o.ref(t.addButtonText),P=o.ref(t.removeButtonText),m=o.ref(Array.isArray(t.allowedTypes)?t.allowedTypes:t.allowedTypes?t.allowedTypes.split(","):[]),g=o.ref(Array.isArray(t.disallowedTypes)?t.disallowedTypes:t.disallowedTypes?t.disallowedTypes.split(","):[]),c=o.ref(t.maxFileSize??a.hison.getMaxFilesetSize()),f=o.ref(typeof t.onDisallowedType=="function"?t.onDisallowedType:void 0),C=o.ref(typeof t.onMaxFileSizeExceeded=="function"?t.onMaxFileSizeExceeded:void 0),r=o.ref(t.modelValue),I=o.ref(!1),J=o.computed(()=>{if(m.value.length===0)return"";const e=new Set(g.value.map(s=>s.toLowerCase())),l=m.value.filter(s=>!e.has(s.toLowerCase()));return l.length>0?l.join(","):void 0}),D=o.ref(null),p=e=>{if(!e||e.isDeleted){D.value=null;return}if(e.filePath)D.value=e.filePath;else if(e.file instanceof File){const l=new FileReader;l.onload=s=>{var $;return D.value=String((($=s.target)==null?void 0:$.result)||"")},l.readAsDataURL(e.file)}else e.fileName&&e.fileName.startsWith("data:")?D.value=e.fileName:D.value=null};p(r.value);const w=(e,l)=>{n(e,{event:l,api:d.value})},K=e=>w("preview-click",e),Q=e=>w("preview-dblclick",e),X=e=>w("preview-contextmenu",e),Y=e=>w("preview-pointerenter",e),Z=e=>w("preview-pointerleave",e),_=e=>w("preview-pointerdown",e),ee=e=>w("preview-pointerup",e),B=o.ref(t.tabIndex!==null&&t.tabIndex!==""?Number(t.tabIndex):null),N=a.useDevice(),S=o.ref([]),A=()=>{S.value=a.extractResponsiveClasses(a.toClassString(t.class)||"",N.value),a.getIndexSpecificClassNameFromClassList(S.value,"col")===-1&&S.value.push("hison-col-12"),a.addComponentNameToClass(S.value,"size",a.hisonCloser.componentStyle.size),a.addComponentNameToClass(S.value,"color","primary")},te=o.computed(()=>{const e=[];return e.push(...a.extractPrefixedClasses(a.toClassString(t.class)||"","size")),e.push(...a.extractPrefixedClasses(a.toClassString(t.class)||"","color")),e}),oe=o.computed(()=>i.value!==a.EditMode.readonly),le=o.computed(()=>!!r.value&&i.value!==a.EditMode.readonly),ne=e=>{var $,O,H;const l=e.type,s="."+(($=e.name.split(".").pop())==null?void 0:$.toLowerCase());return m.value.length>0&&!m.value.some(E=>E===l||E===s)?(console.warn(`File type not in allowedTypes: ${l} / ${s}`),(O=f.value)==null||O.call(f,e,m.value,null),!1):g.value.length>0&&g.value.some(E=>E===l||E===s)?(console.warn(`File type is in disallowedTypes: ${l} / ${s}`),(H=f.value)==null||H.call(f,e,null,g.value),!1):!0},ie=e=>{var l;return typeof c.value=="number"&&Number.isFinite(c.value)&&e.size>c.value?(console.warn(`File too large: ${e.name}
+Max size: ${c.value} Byte`),(l=C.value)==null||l.call(C,e,e.size,c.value),!1):!0},V=e=>{if(!ne(e)||!ie(e))return;const l=e.name.split(".").pop()||"",s={fileName:e.name,fileSize:e.size,extension:l,file:e,isNew:!0};r.value=s,p(s),I.value=!0,n("update:modelValue",s),n("add",s,d.value),n("change",s,d.value)},ae=e=>{if(i.value!==a.EditMode.editable)return;const l=e.target.files;!l||!l.length||(V(l[0]),o.nextTick(()=>{y.value&&(y.value.value="")}))},se=e=>{!h.value||i.value!==a.EditMode.editable||z.value||b.value||(L.value=!0)},re=e=>{var l;L.value=!1,!(!h.value||i.value!==a.EditMode.editable)&&(z.value||b.value||!((l=e.dataTransfer)!=null&&l.files)||!e.dataTransfer.files.length||V(e.dataTransfer.files[0]))},ue=()=>{if(i.value!==a.EditMode.editable)return;const e=r.value;e&&e.file&&!e.fileId?r.value=null:e&&e.fileId&&(r.value={...e,isDeleted:!0}),p(null),I.value=!0,n("update:modelValue",r.value),n("remove",e,d.value),n("change",r.value,d.value)},de=()=>{var e;(e=y.value)==null||e.click()},R=e=>{if(!e||!e.getIsDataModel||!e.getIsDataModel()||e.getRowCount()===0)return;const l=e.getRow(0);r.value=l,p(l)},U=()=>{a.hisonCloser.component.imageboxList[u]&&a.hisonCloser.component.imageboxList[u].isHisonvueComponent&&console.warn(`[Hisonvue] The imagebox ID is at risk of being duplicated. ${u}`),a.registerReloadable(x,()=>{j(),o.nextTick(U)}),y.value&&(A(),d.value={isHisonvueComponent:!0,getId:()=>u,getType:()=>"imagebox",isVisible:()=>v.value,setVisible:e=>v.value=e,getEditMode:()=>i.value,setEditMode:e=>{var l,s;i.value=e,(l=a.hisonCloser.component.buttonList[`hison_imagebox_add_button_${u}`])==null||l.setDisable(b.value),(s=a.hisonCloser.component.buttonList[`hison_imagebox_remove_button_${u}`])==null||s.setDisable(b.value)},getValue:()=>a.hison.utils.deepCopyObject(r.value),setValue:e=>{r.value=a.hison.utils.deepCopyObject(e),p(e)},getDataModel:()=>r.value?new a.hison.data.DataModel(r.value):null,setDataModel:e=>{R(e)},load:e=>{e&&e.getIsDataModel&&e.getIsDataModel()?R(e):r.value=a.hison.utils.deepCopyObject(e)},getAttId:()=>F.value,setAttId:e=>{F.value=e},getAddButtonText:()=>M.value,setAddButtonText:e=>M.value=e,getRemoveButtonText:()=>P.value,setRemoveButtonText:e=>P.value=e,getPlaceholder:()=>k.value,setPlaceholder:e=>k.value=e,isEnableDrop:()=>h.value,setEnableDrop:e=>{h.value=e},getAllowedTypes:()=>m.value,setAllowedTypes:e=>m.value=e,getDisallowedTypes:()=>g.value,setDisallowedTypes:e=>{g.value=e},getMaxFileSize:()=>c.value,setMaxFileSize:e=>c.value=e,setOnDisallowedType:e=>{f.value=e},setOnMaxFileSizeExceeded:e=>{C.value=e},isModified:()=>I.value,setModified:e=>I.value=e,isBorder:()=>T.value,setBorder:e=>{T.value=e},getTabIndex:()=>B.value,setTabIndex:e=>{B.value=e!=null?Number(e):null},focus:()=>{var e;(e=a.hisonCloser.component.buttonList[`hison_imagebox_add_button_${u}`])==null||e.focus()},reload:()=>a.reloadHisonComponent(x)},a.hisonCloser.component.imageboxList[u]=d.value,n("mounted",d.value))},j=()=>{delete a.hisonCloser.component.imageboxList[u]};return o.onMounted(U),o.onBeforeUnmount(j),o.watch(()=>t.modelValue,e=>{e!==r.value&&(r.value=e,p(e))}),o.watch(N,e=>{A(),n("responsive-change",e)}),o.watch(()=>t.visible,e=>{const l=!!e;l!==v.value&&(v.value=l)}),o.watch(()=>t.editMode,e=>{e&&e!==i.value&&(i.value=e,o.nextTick(()=>{var l,s;(l=a.hisonCloser.component.buttonList[`hison_imagebox_add_button_${u}`])==null||l.setDisable(b.value),(s=a.hisonCloser.component.buttonList[`hison_imagebox_remove_button_${u}`])==null||s.setDisable(b.value)}))}),o.watch(()=>t.border,e=>{const l=!!e;l!==T.value&&(T.value=l)}),o.watch(()=>t.attId,e=>{const l=e||"";l!==F.value&&(F.value=l)}),o.watch(()=>t.allowedTypes,e=>{const l=Array.isArray(e)?e:e?String(e).split(","):[];l.toString()!==m.value.toString()&&(m.value=l)}),o.watch(()=>t.disallowedTypes,e=>{const l=Array.isArray(e)?e:e?String(e).split(","):[];l.toString()!==g.value.toString()&&(g.value=l)}),o.watch(()=>t.maxFileSize,e=>{const l=Number(e);(Number.isFinite(l)||l===1/0)&&l!==c.value&&(c.value=l)}),o.watch(()=>t.onDisallowedType,e=>{const l=typeof e=="function"?e:void 0;l!==f.value&&(f.value=l)}),o.watch(()=>t.onMaxFileSizeExceeded,e=>{const l=typeof e=="function"?e:void 0;l!==C.value&&(C.value=l)}),o.watch(()=>t.placeholder,e=>{const l=e??"";l!==k.value&&(k.value=l)}),o.watch(()=>t.addButtonText,e=>{const l=e??"";l!==M.value&&(M.value=l)}),o.watch(()=>t.removeButtonText,e=>{const l=e??"";l!==P.value&&(P.value=l)}),o.watch(()=>t.enableDrop,e=>{const l=!!e;l!==h.value&&(h.value=l)}),o.watch(()=>t.modelValue,e=>{e!==r.value&&(r.value=e,p(e))}),o.watch(()=>t.tabIndex,e=>{const l=e===null||e===""?null:Number(e);l!==B.value&&(B.value=l)}),o.watch(()=>t.class,()=>{A()}),{fileInputRef:y,id:u,props:t,imgStyle:o.computed(()=>t.imgStyle||{}),imageValue:r,imageboxMethods:d,visibleClass:W,editModeClass:q,borderClass:G,responsiveClassList:S,buttonClassList:te,disable:b,readonly:z,addButtonText:M,removeButtonText:P,placeholder:k,isDragging:L,previewUrl:D,showAddButton:oe,showRemoveButton:le,accept:J,tabIndex:B,handleDragEnter:se,handleDrop:re,openFileDialog:de,removeImage:ue,onFileChange:ae,onPreviewClick:K,onPreviewDblClick:Q,onPreviewContextMenu:X,onPreviewPointerEnter:Y,onPreviewPointerLeave:Z,onPreviewPointerDown:_,onPreviewPointerUp:ee}}}),ge=["src"],be={class:"img-placeholder"},pe={key:2,class:"imgbox-btn-row"},we={key:1,class:"hison-imagebox-add-text"},ye={key:1,class:"hison-imagebox-add-text"},he={key:1,class:"hison-imagebox-remove-text"},Ce=["id","accept"];function De(t,n,y,u,x,d){const v=o.resolveComponent("HButton");return o.openBlock(),o.createElementBlock("div",{class:o.normalizeClass(["hison-imagebox",...t.responsiveClassList,t.visibleClass,t.borderClass,t.editModeClass]),style:o.normalizeStyle(t.props.style)},[o.createElementVNode("div",{class:o.normalizeClass(["img-preview",{"drag-over":t.isDragging}]),onDragover:n[11]||(n[11]=o.withModifiers(()=>{},["prevent"])),onDragenter:n[12]||(n[12]=o.withModifiers((...i)=>t.handleDragEnter&&t.handleDragEnter(...i),["prevent"])),onDragleave:n[13]||(n[13]=o.withModifiers(i=>t.isDragging=!1,["prevent"])),onDrop:n[14]||(n[14]=o.withModifiers((...i)=>t.handleDrop&&t.handleDrop(...i),["prevent"]))},[t.previewUrl?(o.openBlock(),o.createElementBlock("img",{key:0,src:t.previewUrl,class:"preview-img",style:o.normalizeStyle([t.imgStyle]),onClick:n[0]||(n[0]=(...i)=>t.onPreviewClick&&t.onPreviewClick(...i)),onDblclick:n[1]||(n[1]=(...i)=>t.onPreviewDblClick&&t.onPreviewDblClick(...i)),onContextmenu:n[2]||(n[2]=(...i)=>t.onPreviewContextMenu&&t.onPreviewContextMenu(...i)),onPointerenter:n[3]||(n[3]=(...i)=>t.onPreviewPointerEnter&&t.onPreviewPointerEnter(...i)),onPointerleave:n[4]||(n[4]=(...i)=>t.onPreviewPointerLeave&&t.onPreviewPointerLeave(...i)),onPointerdown:n[5]||(n[5]=(...i)=>t.onPreviewPointerDown&&t.onPreviewPointerDown(...i)),onPointerup:n[6]||(n[6]=(...i)=>t.onPreviewPointerUp&&t.onPreviewPointerUp(...i))},null,44,ge)):o.renderSlot(t.$slots,"empty",{key:1},()=>[o.createElementVNode("div",be,o.toDisplayString(t.placeholder),1)]),t.readonly?o.createCommentVNode("",!0):(o.openBlock(),o.createElementBlock("div",pe,[t.imageValue?(o.openBlock(),o.createElementBlock(o.Fragment,{key:1},[o.createVNode(v,{id:`hison_imagebox_add_button_${t.id}`,disable:t.disable,class:o.normalizeClass(["hison-col-6",...t.buttonClassList]),onClick:t.openFileDialog,onFocus:n[9]||(n[9]=i=>t.$emit("focus",t.imageboxMethods)),onBlur:n[10]||(n[10]=i=>t.$emit("blur",t.imageboxMethods))},{default:o.withCtx(()=>[t.$slots["add-button"]?o.renderSlot(t.$slots,"add-button",{key:0,add:t.openFileDialog}):(o.openBlock(),o.createElementBlock("span",ye,o.toDisplayString(t.addButtonText),1))]),_:3},8,["id","disable","class","onClick"]),o.createVNode(v,{id:`hison_imagebox_remove_button_${t.id}`,disable:t.disable,class:o.normalizeClass(["hison-col-6",...t.buttonClassList]),onClick:t.removeImage},{default:o.withCtx(()=>[t.$slots["remove-button"]?o.renderSlot(t.$slots,"remove-button",{key:0,remove:t.removeImage}):(o.openBlock(),o.createElementBlock("span",he,o.toDisplayString(t.removeButtonText),1))]),_:3},8,["id","disable","class","onClick"])],64)):(o.openBlock(),o.createBlock(v,{key:0,id:`hison_imagebox_add_button_${t.id}`,disable:t.disable,class:o.normalizeClass(["hison-col-12",...t.buttonClassList]),tabindex:t.tabIndex??void 0,onClick:t.openFileDialog,onFocus:n[7]||(n[7]=i=>t.$emit("focus",t.imageboxMethods)),onBlur:n[8]||(n[8]=i=>t.$emit("blur",t.imageboxMethods))},{default:o.withCtx(()=>[t.$slots["add-button"]?o.renderSlot(t.$slots,"add-button",{key:0,add:t.openFileDialog}):(o.openBlock(),o.createElementBlock("span",we,o.toDisplayString(t.addButtonText),1))]),_:3},8,["id","disable","class","tabindex","onClick"]))]))],34),o.createElementVNode("input",{id:`hison_imagebox_${t.id}`,ref:"fileInputRef",type:"file",accept:t.accept||void 0,multiple:!1,hidden:"",onChange:n[15]||(n[15]=(...i)=>t.onFileChange&&t.onFileChange(...i))},null,40,Ce)],6)}const Se=me._export_sfc(fe,[["render",De]]);exports.default=Se;