@opendesign-plus/components 0.0.1-rc.34 → 0.0.1-rc.36

package/dist/treeshaking/components/search/internal/SearchImageInput.vue.mjs

@@ -0,0 +1,8 @@
+import _sfc_main from "./SearchImageInput.vue2.mjs";
+import './SearchImageInput.css';
+import './SearchImageInput2.css';
+import _export_sfc from "../../../_virtual/_plugin-vue_export-helper.mjs";
+const SearchImageInput = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f28dde35"]]);
+export {
+  SearchImageInput as default
+};

package/dist/treeshaking/components/search/internal/SearchImageInput.vue2.mjs

@@ -0,0 +1,305 @@
+import { defineComponent, computed, ref, watch, openBlock, createElementBlock, normalizeClass, createElementVNode, createVNode, unref, createSlots, withCtx, renderSlot, withModifiers, createCommentVNode, createBlock, createTextVNode, toDisplayString, nextTick } from "vue";
+import { OInput, OIcon, OFigure, OPopover } from "@opensig/opendesign";
+import { useImageSearch } from "../composables/useImageSearch.mjs";
+import { useI18n } from "../../../i18n/index.mjs";
+import IconSearch from "../../../_virtual/icon-header-search.mjs";
+import IconClose from "../../../_virtual/icon-close.mjs";
+import IconImageUpload from "../../../_virtual/icon-image-upload.mjs";
+import IconDelete from "../../../_virtual/icon-delete-hover.mjs";
+import IconImageZoomin from "../../../_virtual/icon-image-zoomin.mjs";
+const _hoisted_1 = { class: "o-search-image-input-row" };
+const _hoisted_2 = {
+  key: 0,
+  class: "o-search-image-input-thumb"
+};
+const _hoisted_3 = {
+  key: 0,
+  class: "o-search-image-input-preview"
+};
+const _hoisted_4 = { class: "o-search-image-input-preview-wrapper" };
+const _hoisted_5 = { class: "o-search-image-input-preview-zoom" };
+const _hoisted_6 = ["accept"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "SearchImageInput",
+  props: {
+    modelValue: { default: "" },
+    imageUrl: { default: "" },
+    placeholder: {},
+    imagePlaceholder: {},
+    size: { default: "medium" },
+    enableImageSearch: { type: Boolean, default: false },
+    uploadImage: {},
+    maxImageSize: { default: 10 * 1024 * 1024 },
+    imageUploadTooltip: {},
+    expanded: { type: Boolean, default: true },
+    clearable: { type: Boolean, default: true },
+    showSuffix: { type: Boolean, default: true },
+    inlineThumbnail: { type: Boolean, default: false },
+    preview: { type: Boolean, default: true },
+    disabled: { type: Boolean, default: false },
+    allowedImageTypes: { default: () => ["image/jpeg", "image/png", "image/gif", "image/webp"] }
+  },
+  emits: ["update:modelValue", "update:imageUrl", "focus", "blur", "enter", "clear", "image-clear", "image-upload-start", "image-upload-success", "image-upload-error", "image-validate-error", "preview-change"],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { t } = useI18n();
+    const uploadImageRef = computed(() => props.uploadImage);
+    const maxImageSizeRef = computed(() => props.maxImageSize);
+    const allowedImageTypesRef = computed(() => props.allowedImageTypes);
+    const acceptAttr = computed(() => (props.allowedImageTypes ?? []).join(","));
+    const image = useImageSearch({
+      uploadImage: uploadImageRef,
+      maxImageSize: maxImageSizeRef,
+      allowedImageTypes: allowedImageTypesRef,
+      onUploadStart: (file) => emit("image-upload-start", file),
+      onUploadSuccess: (url, file) => {
+        emit("update:imageUrl", url);
+        emit("image-upload-success", url, file);
+      },
+      onUploadError: (error, file) => emit("image-upload-error", error, file),
+      onValidationError: (reason, file) => emit("image-validate-error", reason, file)
+    });
+    const fileInputRef = ref();
+    const inputRef = ref();
+    const uploadBtnRef = ref(null);
+    const innerValue = computed({
+      get: () => props.modelValue,
+      set: (val) => emit("update:modelValue", val)
+    });
+    watch(
+      () => props.imageUrl,
+      (val) => {
+        image.setExternalUrl(val);
+      },
+      { immediate: true }
+    );
+    const showThumbnail = computed(() => !!image.previewUrl.value);
+    const placeholder = computed(() => {
+      if (showThumbnail.value) {
+        return props.imagePlaceholder ?? t("search.extendedPlaceholder");
+      }
+      return props.placeholder ?? t("search.placeholder");
+    });
+    const handleClear = () => {
+      innerValue.value = "";
+      if (showThumbnail.value) {
+        handleImageClear();
+      }
+      emit("clear");
+    };
+    const handleImageClear = () => {
+      image.reset();
+      emit("update:imageUrl", "");
+      emit("image-clear");
+    };
+    const handleUploadClick = () => {
+      image.pickFile(fileInputRef.value);
+      nextTick(() => {
+        var _a, _b;
+        return (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      });
+    };
+    const handleFileSelect = (event) => {
+      image.onFileChange(event);
+      nextTick(() => {
+        var _a, _b;
+        return (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      });
+    };
+    const handlePaste = (event) => {
+      if (!props.enableImageSearch) return;
+      image.onPaste(event);
+    };
+    const handleDragOver = (event) => {
+      if (!props.enableImageSearch) return;
+      image.onDragOver(event);
+    };
+    const handleDrop = (event) => {
+      if (!props.enableImageSearch) return;
+      image.onDrop(event);
+    };
+    const onPreviewChange = (visible) => {
+      emit("preview-change", visible);
+    };
+    const hasValue = computed(() => !!innerValue.value || showThumbnail.value);
+    const awaitUpload = () => image.awaitUpload();
+    __expose({
+      focus: () => {
+        var _a, _b;
+        return (_b = (_a = inputRef.value) == null ? void 0 : _a.focus) == null ? void 0 : _b.call(_a);
+      },
+      blur: () => {
+        var _a, _b;
+        return (_b = (_a = inputRef.value) == null ? void 0 : _a.blur) == null ? void 0 : _b.call(_a);
+      },
+      awaitUpload,
+      getUploadedUrl: () => image.uploadedUrl.value,
+      getIsUploading: () => image.isUploading.value,
+      resetImage: () => {
+        image.reset();
+        emit("update:imageUrl", "");
+      }
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass(["o-search-image-input", { "has-image": showThumbnail.value, "is-expanded": __props.expanded && showThumbnail.value }]),
+        onDragover: handleDragOver,
+        onDrop: handleDrop
+      }, [
+        createElementVNode("div", _hoisted_1, [
+          createVNode(unref(OInput), {
+            ref_key: "inputRef",
+            ref: inputRef,
+            modelValue: innerValue.value,
+            "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => innerValue.value = $event),
+            placeholder: placeholder.value,
+            size: __props.size,
+            disabled: __props.disabled,
+            class: "o-search-image-input-input",
+            onPressEnter: _cache[4] || (_cache[4] = ($event) => emit("enter")),
+            onFocus: _cache[5] || (_cache[5] = (e) => emit("focus", e)),
+            onBlur: _cache[6] || (_cache[6] = (e) => emit("blur", e)),
+            onPaste: handlePaste
+          }, createSlots({
+            prefix: withCtx(() => [
+              renderSlot(_ctx.$slots, "prefix", {}, () => [
+                createVNode(unref(OIcon), { class: "o-search-image-input-icon" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(IconSearch))
+                  ]),
+                  _: 1
+                })
+              ], true),
+              __props.inlineThumbnail && showThumbnail.value ? (openBlock(), createElementBlock("div", _hoisted_2, [
+                createVNode(unref(OFigure), {
+                  src: unref(image).previewUrl.value,
+                  alt: "",
+                  class: "o-search-image-input-thumb-figure"
+                }, null, 8, ["src"]),
+                createElementVNode("div", {
+                  class: "o-search-image-input-thumb-zoom",
+                  onMousedown: _cache[0] || (_cache[0] = withModifiers(() => {
+                  }, ["prevent"]))
+                }, [
+                  createVNode(unref(OIcon), { class: "o-search-image-input-thumb-zoom-icon" }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconImageZoomin))
+                    ]),
+                    _: 1
+                  })
+                ], 32),
+                createVNode(unref(OIcon), {
+                  class: "o-search-image-input-thumb-remove",
+                  onMousedown: _cache[1] || (_cache[1] = withModifiers(() => {
+                  }, ["prevent"])),
+                  onClick: withModifiers(handleImageClear, ["stop"])
+                }, {
+                  default: withCtx(() => [
+                    createVNode(unref(IconDelete))
+                  ]),
+                  _: 1
+                })
+              ])) : createCommentVNode("", true)
+            ]),
+            _: 2
+          }, [
+            __props.showSuffix ? {
+              name: "suffix",
+              fn: withCtx(() => [
+                renderSlot(_ctx.$slots, "suffix", { hasValue: hasValue.value }, () => [
+                  __props.enableImageSearch ? (openBlock(), createElementBlock("span", {
+                    key: 0,
+                    ref_key: "uploadBtnRef",
+                    ref: uploadBtnRef,
+                    class: "o-search-image-input-upload-btn"
+                  }, [
+                    createVNode(unref(OIcon), {
+                      class: "o-search-image-input-icon upload",
+                      onClick: withModifiers(handleUploadClick, ["stop"])
+                    }, {
+                      default: withCtx(() => [
+                        createVNode(unref(IconImageUpload))
+                      ]),
+                      _: 1
+                    })
+                  ], 512)) : createCommentVNode("", true),
+                  __props.enableImageSearch && uploadBtnRef.value ? (openBlock(), createBlock(unref(OPopover), {
+                    key: 1,
+                    trigger: "hover",
+                    position: "bottom",
+                    target: uploadBtnRef.value,
+                    "body-class": "o-search-image-input-tooltip"
+                  }, {
+                    default: withCtx(() => [
+                      createTextVNode(toDisplayString(__props.imageUploadTooltip ?? unref(t)("search.imageUploadTooltip")), 1)
+                    ]),
+                    _: 1
+                  }, 8, ["target"])) : createCommentVNode("", true),
+                  __props.clearable && hasValue.value ? (openBlock(), createBlock(unref(OIcon), {
+                    key: 2,
+                    class: "o-search-image-input-icon close",
+                    onMousedown: _cache[2] || (_cache[2] = withModifiers(() => {
+                    }, ["prevent"])),
+                    onClick: withModifiers(handleClear, ["stop"])
+                  }, {
+                    default: withCtx(() => [
+                      createVNode(unref(IconClose))
+                    ]),
+                    _: 1
+                  })) : createCommentVNode("", true)
+                ], true)
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["modelValue", "placeholder", "size", "disabled"])
+        ]),
+        __props.expanded && showThumbnail.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+          renderSlot(_ctx.$slots, "preview", {
+            previewUrl: unref(image).previewUrl.value,
+            remove: handleImageClear
+          }, () => [
+            createElementVNode("div", _hoisted_4, [
+              createVNode(unref(OFigure), {
+                src: unref(image).previewUrl.value,
+                preview: __props.preview,
+                alt: "",
+                class: "o-search-image-input-preview-figure",
+                onPreview: onPreviewChange
+              }, null, 8, ["src", "preview"]),
+              createElementVNode("div", _hoisted_5, [
+                createVNode(unref(OIcon), { class: "o-search-image-input-preview-zoom-icon" }, {
+                  default: withCtx(() => [
+                    createVNode(unref(IconImageZoomin))
+                  ]),
+                  _: 1
+                })
+              ]),
+              createVNode(unref(OIcon), {
+                class: "o-search-image-input-preview-remove",
+                onClick: withModifiers(handleImageClear, ["stop"])
+              }, {
+                default: withCtx(() => [
+                  createVNode(unref(IconDelete))
+                ]),
+                _: 1
+              })
+            ])
+          ], true)
+        ])) : createCommentVNode("", true),
+        __props.enableImageSearch ? (openBlock(), createElementBlock("input", {
+          key: 1,
+          ref_key: "fileInputRef",
+          ref: fileInputRef,
+          type: "file",
+          accept: acceptAttr.value,
+          class: "o-search-image-input-file",
+          onChange: handleFileSelect
+        }, null, 40, _hoisted_6)) : createCommentVNode("", true)
+      ], 34);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/dist/treeshaking/components/search/internal/SearchImageInput2.css

@@ -0,0 +1,38 @@
+.hover-icon-rotate .o-icon {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon {
+    transform: rotate(-180deg);
+}
+}
+.o-search-image-input-tooltip {
+  padding: var(--o-gap-3) var(--o-gap-4);
+  max-width: 240px;
+  font-size: 12px;
+  line-height: 18px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-search-image-input-tooltip {
+    font-size: 12px;
+    line-height: 18px;
+}
+}