@opendesign-plus-test/components 0.0.1-rc.64 → 0.0.1-rc.66

package/dist/esm/components/search/internal/SearchImageInput.css

@@ -0,0 +1,213 @@
+.hover-icon-rotate .o-icon[data-v-f28dde35] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-f28dde35] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-image-input[data-v-f28dde35] {
+  display: flex;
+  flex-direction: column;
+  border: 1px solid transparent;
+  border-radius: var(--o-radius-xs);
+  background-color: var(--o-color-fill2);
+  transition: border-color var(--o-duration-m1);
+}
+.o-search-image-input.is-expanded[data-v-f28dde35] {
+  border-color: var(--o-color-primary1);
+}
+.o-search-image-input.is-expanded[data-v-f28dde35] .o-input.el-input .el-input__wrapper,
+.o-search-image-input.is-expanded[data-v-f28dde35] .o_box-main {
+  border: none !important;
+  border-radius: var(--o-radius-xs) var(--o-radius-xs) 0 0;
+  box-shadow: none !important;
+}
+.o-search-image-input-row[data-v-f28dde35] {
+  display: flex;
+  align-items: center;
+}
+.o-search-image-input-input[data-v-f28dde35] {
+  width: 100%;
+}
+.o-search-image-input-icon[data-v-f28dde35] {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 16px;
+}
+.o-search-image-input-icon.close[data-v-f28dde35] {
+  font-size: 16px;
+}
+.o-search-image-input-icon.close[data-v-f28dde35] {
+  overflow: hidden;
+}
+.o-search-image-input-icon.close svg[data-v-f28dde35] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.o-search-image-input-icon.close:hover svg[data-v-f28dde35] {
+    transform: rotate(180deg);
+}
+}
+.o-search-image-input-icon.upload[data-v-f28dde35] {
+  fill: var(--o-color-info1);
+}
+.o-search-image-input-upload-btn[data-v-f28dde35] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  margin-right: 8px;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.o-search-image-input-upload-btn[data-v-f28dde35]:hover {
+    background-color: var(--o-color-control2-light);
+}
+.o-search-image-input-upload-btn:hover .o-search-image-input-icon.upload[data-v-f28dde35] {
+    color: var(--o-color-primary2);
+}
+}
+.o-search-image-input-file[data-v-f28dde35] {
+  display: none;
+}
+.o-search-image-input-thumb[data-v-f28dde35] {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+}
+@media (hover: hover) {
+.o-search-image-input-thumb:hover .o-search-image-input-thumb-remove[data-v-f28dde35],
+  .o-search-image-input-thumb:hover .o-search-image-input-thumb-zoom[data-v-f28dde35] {
+    opacity: 1;
+}
+}
+.o-search-image-input-thumb-figure[data-v-f28dde35] {
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.o-search-image-input-thumb-figure[data-v-f28dde35] img {
+  height: 40px;
+  width: 40px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+@media (min-width: 841px) and (max-width: 1680px) {
+.o-search-image-input-thumb-figure[data-v-f28dde35] {
+    height: 32px;
+    width: 32px;
+}
+}
+@media (max-width: 840px) {
+.o-search-image-input-thumb-figure[data-v-f28dde35] {
+    height: 24px;
+    width: 24px;
+}
+}
+.o-search-image-input-thumb-zoom[data-v-f28dde35] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  pointer-events: auto;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-thumb-zoom .o-search-image-input-thumb-zoom-icon[data-v-f28dde35] {
+  color: #fff;
+  font-size: 16px;
+}
+.o-search-image-input-thumb-remove[data-v-f28dde35] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-thumb-remove[data-v-f28dde35] svg {
+  width: 16px;
+  height: 16px;
+  fill: rgb(var(--o-mixedgray-9));
+}
+.o-search-image-input-preview[data-v-f28dde35] {
+  padding: 0 12px 8px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-wrapper[data-v-f28dde35] {
+  position: relative;
+  display: inline-flex;
+  overflow: visible;
+  margin-top: 8px;
+}
+@media (hover: hover) {
+.o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-remove[data-v-f28dde35],
+  .o-search-image-input-preview .o-search-image-input-preview-wrapper:hover .o-search-image-input-preview-zoom[data-v-f28dde35] {
+    opacity: 1;
+}
+}
+.o-search-image-input-preview .o-search-image-input-preview-zoom[data-v-f28dde35] {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  border-radius: 4px;
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-preview .o-search-image-input-preview-zoom .o-search-image-input-preview-zoom-icon[data-v-f28dde35] {
+  color: #fff;
+  font-size: 24px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-f28dde35] {
+  height: 72px;
+  width: 72px;
+  border-radius: 4px;
+  overflow: hidden;
+}
+.o-search-image-input-preview .o-search-image-input-preview-figure[data-v-f28dde35] img {
+  height: 72px;
+  width: 72px;
+  object-fit: cover;
+  object-position: center;
+  border-radius: 4px;
+}
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-f28dde35] {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  width: 16px;
+  height: 16px;
+  display: flex !important;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  z-index: 1;
+  transition: opacity var(--o-duration-m1);
+}
+.o-search-image-input-preview .o-search-image-input-preview-remove[data-v-f28dde35] svg {
+  width: 16px;
+  height: 16px;
+}

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

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

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

@@ -0,0 +1,256 @@
+import { defineComponent as J, computed as d, ref as S, watch as K, openBlock as c, createElementBlock as h, normalizeClass as L, createElementVNode as b, createVNode as l, unref as o, createSlots as Q, withCtx as s, renderSlot as k, withModifiers as p, createCommentVNode as f, createBlock as V, createTextVNode as W, toDisplayString as X, nextTick as z } from "vue";
+import { OInput as Y, OIcon as g, OFigure as B, OPopover as _ } from "@opensig/opendesign";
+import { useImageSearch as ee } from "../composables/useImageSearch.mjs";
+import { useI18n as ae } from "../../../i18n/index.mjs";
+import oe from "../../../icons/icon-header-search.mjs";
+import le from "../../../icons/icon-close.mjs";
+import te from "../../../icons/icon-image-upload.mjs";
+import T from "../../../icons/icon-delete-hover.mjs";
+import P from "../../../icons/icon-image-zoomin.mjs";
+const re = { class: "o-search-image-input-row" }, ie = {
+  key: 0,
+  class: "o-search-image-input-thumb"
+}, ne = {
+  key: 0,
+  class: "o-search-image-input-preview"
+}, se = { class: "o-search-image-input-preview-wrapper" }, ue = { class: "o-search-image-input-preview-zoom" }, de = ["accept"], Ue = /* @__PURE__ */ J({
+  __name: "SearchImageInput",
+  props: {
+    modelValue: { default: "" },
+    imageUrl: { default: "" },
+    placeholder: {},
+    imagePlaceholder: {},
+    size: { default: "medium" },
+    enableImageSearch: { type: Boolean, default: !1 },
+    uploadImage: {},
+    maxImageSize: { default: 10 * 1024 * 1024 },
+    imageUploadTooltip: {},
+    expanded: { type: Boolean, default: !0 },
+    clearable: { type: Boolean, default: !0 },
+    showSuffix: { type: Boolean, default: !0 },
+    inlineThumbnail: { type: Boolean, default: !1 },
+    preview: { type: Boolean, default: !0 },
+    disabled: { type: Boolean, default: !1 },
+    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(i, { expose: R, emit: D }) {
+    const n = i, r = D, { t: U } = ae(), E = d(() => n.uploadImage), O = d(() => n.maxImageSize), F = d(() => n.allowedImageTypes), M = d(() => (n.allowedImageTypes ?? []).join(",")), t = ee({
+      uploadImage: E,
+      maxImageSize: O,
+      allowedImageTypes: F,
+      onUploadStart: (e) => r("image-upload-start", e),
+      onUploadSuccess: (e, a) => {
+        r("update:imageUrl", e), r("image-upload-success", e, a);
+      },
+      onUploadError: (e, a) => r("image-upload-error", e, a),
+      onValidationError: (e, a) => r("image-validate-error", e, a)
+    }), x = S(), v = S(), y = S(null), w = d({
+      get: () => n.modelValue,
+      set: (e) => r("update:modelValue", e)
+    });
+    K(
+      () => n.imageUrl,
+      (e) => {
+        t.setExternalUrl(e);
+      },
+      { immediate: !0 }
+    );
+    const m = d(() => !!t.previewUrl.value), N = d(() => m.value ? n.imagePlaceholder ?? U("search.extendedPlaceholder") : n.placeholder ?? U("search.placeholder")), $ = () => {
+      w.value = "", m.value && I(), r("clear");
+    }, I = () => {
+      t.reset(), r("update:imageUrl", ""), r("image-clear");
+    }, j = () => {
+      t.pickFile(x.value), z(() => {
+        var e, a;
+        return (a = (e = v.value) == null ? void 0 : e.focus) == null ? void 0 : a.call(e);
+      });
+    }, A = (e) => {
+      t.onFileChange(e), z(() => {
+        var a, u;
+        return (u = (a = v.value) == null ? void 0 : a.focus) == null ? void 0 : u.call(a);
+      });
+    }, Z = (e) => {
+      n.enableImageSearch && t.onPaste(e);
+    }, q = (e) => {
+      n.enableImageSearch && t.onDragOver(e);
+    }, G = (e) => {
+      n.enableImageSearch && t.onDrop(e);
+    }, H = (e) => {
+      r("preview-change", e);
+    }, C = d(() => !!w.value || m.value);
+    return R({
+      focus: () => {
+        var e, a;
+        return (a = (e = v.value) == null ? void 0 : e.focus) == null ? void 0 : a.call(e);
+      },
+      blur: () => {
+        var e, a;
+        return (a = (e = v.value) == null ? void 0 : e.blur) == null ? void 0 : a.call(e);
+      },
+      awaitUpload: () => t.awaitUpload(),
+      getUploadedUrl: () => t.uploadedUrl.value,
+      getIsUploading: () => t.isUploading.value,
+      resetImage: () => {
+        t.reset(), r("update:imageUrl", "");
+      }
+    }), (e, a) => (c(), h("div", {
+      class: L(["o-search-image-input", { "has-image": m.value, "is-expanded": i.expanded && m.value }]),
+      onDragover: q,
+      onDrop: G
+    }, [
+      b("div", re, [
+        l(o(Y), {
+          ref_key: "inputRef",
+          ref: v,
+          modelValue: w.value,
+          "onUpdate:modelValue": a[3] || (a[3] = (u) => w.value = u),
+          placeholder: N.value,
+          size: i.size,
+          disabled: i.disabled,
+          class: "o-search-image-input-input",
+          onPressEnter: a[4] || (a[4] = (u) => r("enter")),
+          onFocus: a[5] || (a[5] = (u) => r("focus", u)),
+          onBlur: a[6] || (a[6] = (u) => r("blur", u)),
+          onPaste: Z
+        }, Q({
+          prefix: s(() => [
+            k(e.$slots, "prefix", {}, () => [
+              l(o(g), { class: "o-search-image-input-icon" }, {
+                default: s(() => [
+                  l(o(oe))
+                ]),
+                _: 1
+              })
+            ], !0),
+            i.inlineThumbnail && m.value ? (c(), h("div", ie, [
+              l(o(B), {
+                src: o(t).previewUrl.value,
+                alt: "",
+                class: "o-search-image-input-thumb-figure"
+              }, null, 8, ["src"]),
+              b("div", {
+                class: "o-search-image-input-thumb-zoom",
+                onMousedown: a[0] || (a[0] = p(() => {
+                }, ["prevent"]))
+              }, [
+                l(o(g), { class: "o-search-image-input-thumb-zoom-icon" }, {
+                  default: s(() => [
+                    l(o(P))
+                  ]),
+                  _: 1
+                })
+              ], 32),
+              l(o(g), {
+                class: "o-search-image-input-thumb-remove",
+                onMousedown: a[1] || (a[1] = p(() => {
+                }, ["prevent"])),
+                onClick: p(I, ["stop"])
+              }, {
+                default: s(() => [
+                  l(o(T))
+                ]),
+                _: 1
+              })
+            ])) : f("", !0)
+          ]),
+          _: 2
+        }, [
+          i.showSuffix ? {
+            name: "suffix",
+            fn: s(() => [
+              k(e.$slots, "suffix", { hasValue: C.value }, () => [
+                i.enableImageSearch ? (c(), h("span", {
+                  key: 0,
+                  ref_key: "uploadBtnRef",
+                  ref: y,
+                  class: "o-search-image-input-upload-btn"
+                }, [
+                  l(o(g), {
+                    class: "o-search-image-input-icon upload",
+                    onClick: p(j, ["stop"])
+                  }, {
+                    default: s(() => [
+                      l(o(te))
+                    ]),
+                    _: 1
+                  })
+                ], 512)) : f("", !0),
+                i.enableImageSearch && y.value ? (c(), V(o(_), {
+                  key: 1,
+                  trigger: "hover",
+                  position: "bottom",
+                  target: y.value,
+                  "body-class": "o-search-image-input-tooltip"
+                }, {
+                  default: s(() => [
+                    W(X(i.imageUploadTooltip ?? o(U)("search.imageUploadTooltip")), 1)
+                  ]),
+                  _: 1
+                }, 8, ["target"])) : f("", !0),
+                i.clearable && C.value ? (c(), V(o(g), {
+                  key: 2,
+                  class: "o-search-image-input-icon close",
+                  onMousedown: a[2] || (a[2] = p(() => {
+                  }, ["prevent"])),
+                  onClick: p($, ["stop"])
+                }, {
+                  default: s(() => [
+                    l(o(le))
+                  ]),
+                  _: 1
+                })) : f("", !0)
+              ], !0)
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["modelValue", "placeholder", "size", "disabled"])
+      ]),
+      i.expanded && m.value ? (c(), h("div", ne, [
+        k(e.$slots, "preview", {
+          previewUrl: o(t).previewUrl.value,
+          remove: I
+        }, () => [
+          b("div", se, [
+            l(o(B), {
+              src: o(t).previewUrl.value,
+              preview: i.preview,
+              alt: "",
+              class: "o-search-image-input-preview-figure",
+              onPreview: H
+            }, null, 8, ["src", "preview"]),
+            b("div", ue, [
+              l(o(g), { class: "o-search-image-input-preview-zoom-icon" }, {
+                default: s(() => [
+                  l(o(P))
+                ]),
+                _: 1
+              })
+            ]),
+            l(o(g), {
+              class: "o-search-image-input-preview-remove",
+              onClick: p(I, ["stop"])
+            }, {
+              default: s(() => [
+                l(o(T))
+              ]),
+              _: 1
+            })
+          ])
+        ], !0)
+      ])) : f("", !0),
+      i.enableImageSearch ? (c(), h("input", {
+        key: 1,
+        ref_key: "fileInputRef",
+        ref: x,
+        type: "file",
+        accept: M.value,
+        class: "o-search-image-input-file",
+        onChange: A
+      }, null, 40, de)) : f("", !0)
+    ], 34));
+  }
+});
+export {
+  Ue as default
+};

package/dist/esm/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;
+}
+}