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

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

@@ -1,213 +0,0 @@
-.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

@@ -1,8 +0,0 @@
-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

@@ -1,256 +0,0 @@
-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

@@ -1,38 +0,0 @@
-.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;
-}
-}