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

package/dist/cjs/components/search/OSearchInput.css

@@ -0,0 +1,155 @@
+.hover-icon-rotate .o-icon[data-v-18e8aec0] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-18e8aec0] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-input[data-v-18e8aec0] {
+  position: relative;
+  width: 100%;
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+}
+.o-search-input[data-v-18e8aec0] .o-input.o_box-large {
+  --_box-height: 48px;
+}
+.o-search-input[data-v-18e8aec0] .o-search-image-input-icon {
+  font-size: 24px;
+}
+.o-search-input[data-v-18e8aec0] .o-search-image-input-upload-btn {
+  width: 24px;
+  height: 24px;
+}
+@media (min-width: 841px) and (max-width: 1680px) {
+.o-search-input[data-v-18e8aec0] .o-input.o_box-large {
+    --_box-height: 40px;
+}
+}
+@media (max-width: 840px) {
+.o-search-input[data-v-18e8aec0] .o-input.o_box-large {
+    --_box-height: 32px;
+}
+.o-search-input[data-v-18e8aec0] .o-search-image-input-icon {
+    font-size: 16px;
+}
+.o-search-input[data-v-18e8aec0] .o-search-image-input-upload-btn {
+    width: 16px;
+    height: 16px;
+}
+}
+.o-search-input-box[data-v-18e8aec0] {
+  position: relative;
+  width: 100%;
+}
+.o-search-input-field[data-v-18e8aec0] {
+  width: 100%;
+}
+.o-search-input-dropdown[data-v-18e8aec0] {
+  position: absolute;
+  top: calc(100% + 4px);
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding: var(--o-gap-4);
+  background-color: var(--o-color-fill2);
+  border-radius: var(--o-radius-xs);
+  box-shadow: var(--o-shadow-2);
+}
+.o-search-input-dropdown-enter-active[data-v-18e8aec0],
+.o-search-input-dropdown-leave-active[data-v-18e8aec0] {
+  transition: opacity var(--o-duration-m1), transform var(--o-duration-m1);
+}
+.o-search-input-dropdown-enter-from[data-v-18e8aec0],
+.o-search-input-dropdown-leave-to[data-v-18e8aec0] {
+  opacity: 0;
+  transform: translateY(-4px);
+}
+.o-search-input-suggest-list-row[data-v-18e8aec0] {
+  display: flex;
+  margin-top: 8px;
+  align-items: center;
+  flex-wrap: wrap;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-input-suggest-list-row[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-input-suggest-list-row[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-input-suggest-list-row[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-search-input-suggest-list-row[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-search-input-suggest-list-row[data-v-18e8aec0] {
+  color: var(--o-color-info1);
+}
+.o-search-input-suggest-list-label[data-v-18e8aec0] {
+  color: var(--o-color-info3);
+  margin-right: 4px;
+  font-size: 14px;
+  line-height: 22px;
+}
+@media (min-width: 1201px) and (max-width: 1680px) {
+.o-search-input-suggest-list-label[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 841px) and (max-width: 1200px) {
+.o-search-input-suggest-list-label[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (min-width: 601px) and (max-width: 840px) {
+.o-search-input-suggest-list-label[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+@media (max-width: 600px) {
+.o-search-input-suggest-list-label[data-v-18e8aec0] {
+    font-size: 12px;
+    line-height: 18px;
+}
+}
+.o-search-input-suggest-list[data-v-18e8aec0] {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+.o-search-input-suggest-list-item[data-v-18e8aec0] {
+  margin-right: 8px;
+  cursor: pointer;
+  color: var(--o-color-primary1);
+}
+.o-search-input-suggest-list-item[data-v-18e8aec0] em {
+  color: var(--o-color-primary1);
+  font-style: normal;
+}
+@media (hover: hover) {
+.o-search-input-suggest-list-item[data-v-18e8aec0]:hover {
+    text-decoration: underline;
+}
+}

package/dist/cjs/components/search/OSearchInput.vue.js

@@ -0,0 +1 @@
+"use strict";const e=require("./OSearchInput.vue2.js");;require('./OSearchInput.css');const r=require("../../_plugin-vue_export-helper.js"),t=r(e,[["__scopeId","data-v-18e8aec0"]]);module.exports=t;

package/dist/cjs/components/search/OSearchInput.vue2.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),C=require("@vueuse/core"),W=require("./internal/SearchImageInput.vue.js"),X=require("./internal/SearchPanel.vue.js"),Y=require("./composables/useSearchHistory.js"),Z=require("../../i18n/index.js"),_={class:"o-search-input-box"},ee={key:0,class:"o-search-input-dropdown"},te={key:0,class:"o-search-input-suggest-list-row"},oe={class:"o-search-input-suggest-list-label"},se={class:"o-search-input-suggest-list"},le=["onClick"],ae={key:0},ne=e.defineComponent({__name:"OSearchInput",props:{modelValue:{default:""},imageUrl:{default:""},size:{default:"large"},placeholder:{},imagePlaceholder:{},enableImageSearch:{type:Boolean,default:!1},uploadImage:{},maxImageSize:{default:10*1024*1024},imageUploadTooltip:{},allowedImageTypes:{},suggestItems:{default:()=>[]},onestepItems:{default:()=>[]},suggestTitle:{},onestepTitle:{},noDataText:{},showSuggestEmpty:{type:Boolean,default:!0},highlightKeyword:{type:Boolean,default:!0},debounce:{default:300},enableHistory:{type:Boolean,default:!0},historyItems:{default:()=>[]},maxHistoryCount:{default:6},storeHistory:{type:Boolean,default:!1},storageKey:{default:"search-history"},historyTitle:{},autoSaveHistory:{type:Boolean,default:!0},hotItems:{default:()=>[]},hotTitle:{},suggestList:{default:()=>[]},suggestListLabel:{},clearable:{type:Boolean,default:!0},closeOnSearch:{type:Boolean,default:!0},closeOnClickOutside:{type:Boolean,default:!0},openOnFocus:{type:Boolean,default:!0},alwaysInlineThumbnail:{type:Boolean}},emits:["update:modelValue","update:imageUrl","update:historyItems","focus","blur","input","clear","search","recommend-click","onestep-click","history-click","hot-click","suggest-list-click","delete-history","delete-history-item","image-upload-start","image-upload-success","image-upload-error","image-validate-error"],setup(l,{expose:B,emit:b}){const a=l,n=b,{t:x}=Z.useI18n();function H(t){const s=[],u=/<em>(.*?)<\/em>/g;let o=0,r;for(;(r=u.exec(t))!==null;)r.index>o&&s.push({text:t.slice(o,r.index),em:!1}),s.push({text:r[1],em:!0}),o=r.index+r[0].length;return o<t.length&&s.push({text:t.slice(o),em:!1}),s}const m=e.ref(),k=e.ref(null),i=e.computed({get:()=>a.modelValue,set:t=>n("update:modelValue",t)}),d=e.ref(!1),w=e.ref(!1),v=e.ref(!1),p=e.ref(!1),P=e.computed(()=>{if(!d.value||a.imageUrl||p.value)return!1;const t=!!i.value&&(a.suggestItems.length>0||a.onestepItems.length>0||a.showSuggestEmpty),s=a.enableHistory&&g.items.value.length>0&&!i.value,u=a.hotItems.length>0&&!i.value;return!!(t||a.openOnFocus&&(s||u))}),R=e.toRef(a,"historyItems"),U=e.toRef(a,"storageKey"),T=e.toRef(a,"storeHistory"),V=e.toRef(a,"maxHistoryCount"),g=Y.useSearchHistory({initial:R,storageKey:U,storeHistory:T,maxHistoryCount:V,onChange:t=>n("update:historyItems",t)});let y=!1;const $=C.useDebounceFn(t=>{if(y){y=!1;return}n("input",t)},()=>a.debounce);e.watch(i,t=>{$(t)}),C.onClickOutside(k,()=>{a.closeOnClickOutside&&(w.value||v.value||(d.value=!1))});const E=()=>{d.value=!0,n("focus")},z=()=>{n("blur")},h=async t=>{var o,r,c,S,f,I;(r=(o=m.value)==null?void 0:o.getIsUploading)!=null&&r.call(o)&&await((S=(c=m.value).awaitUpload)==null?void 0:S.call(c));const s=t!==void 0?t.trim():i.value.trim(),u=((I=(f=m.value)==null?void 0:f.getUploadedUrl)==null?void 0:I.call(f))||a.imageUrl;!s&&!u||(a.autoSaveHistory&&s&&g.push(s),a.closeOnSearch&&(d.value=!1),n("search",{keyword:s,imageUrl:u||void 0}))},L=()=>{i.value="",n("clear")},O=t=>{n("recommend-click",t),y=!0,i.value=t.key,h(t.key??"")},F=t=>{if(n("onestep-click",t),t.path){const s=t.path;typeof window<"u"&&window.open(s,"_blank","noopener,noreferrer")}},N=t=>{n("history-click",t),h(t)},D=t=>{n("hot-click",t),h(t)},q=t=>{g.remove(t),n("delete-history-item",t)},K=()=>{const t=[...g.items.value];g.clearAll(),n("delete-history",t)},j=t=>{const s=t.replace(/<[^>]+>/g,"");n("suggest-list-click",s),y=!0,i.value=s,h(s)},A=t=>{w.value=t,t||(v.value=!0,setTimeout(()=>{v.value=!1},100))},G=e.computed(()=>!!a.imageUrl&&(a.alwaysInlineThumbnail||!d.value)),J=t=>{p.value=!0,n("image-upload-start",t)},M=(t,s)=>{p.value=!1,n("image-upload-success",t,s)},Q=()=>{p.value=!1,n("update:imageUrl","")};return B({focus:()=>{var t,s;return(s=(t=m.value)==null?void 0:t.focus)==null?void 0:s.call(t)},blur:()=>{var t,s;return(s=(t=m.value)==null?void 0:t.blur)==null?void 0:s.call(t)},search:h,saveHistory:t=>g.push(t??i.value)}),(t,s)=>{var u;return e.openBlock(),e.createElementBlock("div",{ref_key:"wrapperRef",ref:k,class:e.normalizeClass(["o-search-input",{"is-focus":d.value}])},[e.createElementVNode("div",_,[e.createVNode(W,{ref_key:"inputRef",ref:m,modelValue:i.value,"onUpdate:modelValue":s[0]||(s[0]=o=>i.value=o),"image-url":l.imageUrl,placeholder:l.placeholder,"image-placeholder":l.imagePlaceholder,size:l.size,"enable-image-search":l.enableImageSearch,"upload-image":l.uploadImage,"max-image-size":l.maxImageSize,"image-upload-tooltip":l.imageUploadTooltip,"allowed-image-types":l.allowedImageTypes,expanded:d.value&&!a.alwaysInlineThumbnail,"inline-thumbnail":G.value,clearable:l.clearable,class:"o-search-input-field","onUpdate:imageUrl":s[1]||(s[1]=o=>n("update:imageUrl",o)),onFocus:E,onBlur:z,onEnter:h,onClear:L,onImageClear:Q,onImageUploadStart:J,onImageUploadSuccess:M,onImageUploadError:s[2]||(s[2]=(o,r)=>n("image-upload-error",o,r)),onImageValidateError:s[3]||(s[3]=(o,r)=>n("image-validate-error",o,r)),onPreviewChange:A},e.createSlots({prefix:e.withCtx(()=>[e.renderSlot(t.$slots,"input-prefix",{},void 0,!0)]),suffix:e.withCtx(o=>[e.renderSlot(t.$slots,"input-suffix",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),_:2},[t.$slots["image-preview"]?{name:"preview",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"image-preview",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"0"}:void 0]),1032,["modelValue","image-url","placeholder","image-placeholder","size","enable-image-search","upload-image","max-image-size","image-upload-tooltip","allowed-image-types","expanded","inline-thumbnail","clearable"]),e.createVNode(e.Transition,{name:"o-search-input-dropdown"},{default:e.withCtx(()=>[P.value?(e.openBlock(),e.createElementBlock("div",ee,[e.renderSlot(t.$slots,"dropdown",{keyword:l.modelValue},()=>[e.createVNode(X,{keyword:l.modelValue,"onestep-items":l.onestepItems,"onestep-title":l.onestepTitle,"suggest-items":l.suggestItems,"suggest-title":l.suggestTitle,"history-items":l.enableHistory?e.unref(g).items.value:[],"history-title":l.historyTitle,"hot-items":l.hotItems,"hot-title":l.hotTitle,"no-data-text":l.noDataText,"highlight-keyword":l.highlightKeyword,"hide-on-keyword":!0,"show-suggest-empty":l.showSuggestEmpty,"history-layout":"list",onOnestepClick:F,onSuggestClick:O,onHistoryClick:N,onHistoryRemove:q,onHistoryClear:K,onHotClick:D},e.createSlots({_:2},[t.$slots["onestep-header"]?{name:"onestep-header",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"onestep-header",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"0"}:void 0,t.$slots["onestep-content"]?{name:"onestep-content",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"onestep-content",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"1"}:void 0,t.$slots["suggest-header"]?{name:"suggest-header",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"suggest-header",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"2"}:void 0,t.$slots["suggest-content"]?{name:"suggest-content",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"suggest-content",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"3"}:void 0,t.$slots["history-header"]?{name:"history-header",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"history-header",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"4"}:void 0,t.$slots["history-content"]?{name:"history-content",fn:e.withCtx(o=>[e.renderSlot(t.$slots,"history-content",e.normalizeProps(e.guardReactiveProps(o)),void 0,!0)]),key:"5"}:void 0]),1032,["keyword","onestep-items","onestep-title","suggest-items","suggest-title","history-items","history-title","hot-items","hot-title","no-data-text","highlight-keyword","show-suggest-empty"])],!0)])):e.createCommentVNode("",!0)]),_:3})]),(u=l.suggestList)!=null&&u.length?(e.openBlock(),e.createElementBlock("div",te,[e.renderSlot(t.$slots,"suggest-list",{items:l.suggestList},()=>[e.createElementVNode("span",oe,e.toDisplayString(l.suggestListLabel??e.unref(x)("search.suggestListLabel")),1),e.createElementVNode("ul",se,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(l.suggestList,(o,r)=>(e.openBlock(),e.createElementBlock("li",{key:o+r,class:"o-search-input-suggest-list-item",onClick:c=>j(o)},[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(H(o),c=>(e.openBlock(),e.createElementBlock(e.Fragment,{key:c.text+String(c.em)},[c.em?(e.openBlock(),e.createElementBlock("em",ae,e.toDisplayString(c.text),1)):(e.openBlock(),e.createElementBlock(e.Fragment,{key:1},[e.createTextVNode(e.toDisplayString(c.text),1)],64))],64))),128))],8,le))),128))])],!0)])):e.createCommentVNode("",!0)],2)}}});module.exports=ne;

package/dist/cjs/components/search/composables/useImageSearch.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("vue");function L(a){const n=i.ref(""),s=i.ref(null),v=i.ref(""),f=i.ref(!1);let m=null;const h=e=>{var r,u,c,o;const l=(r=a.allowedImageTypes)==null?void 0:r.value,t=l&&l.length>0?l.includes(e.type):(u=e.type)==null?void 0:u.startsWith("image/");return!e.type||!t?((c=a.onValidationError)==null||c.call(a,"type",e),!1):a.maxImageSize.value>0&&e.size>a.maxImageSize.value?((o=a.onValidationError)==null||o.call(a,"size",e),!1):!0},g=()=>{if(n.value)try{URL.revokeObjectURL(n.value)}catch{}n.value="",s.value=null,v.value="",f.value=!1,m=null},U=e=>{if(!e){s.value||g();return}if(v.value!==e){if(n.value&&n.value.startsWith("blob:"))try{URL.revokeObjectURL(n.value)}catch{}v.value=e,n.value=e,s.value=null}},d=e=>{var t,r;if(!h(e))return;g(),s.value=e,n.value=URL.createObjectURL(e),(t=a.onUploadStart)==null||t.call(a,e);const l=(r=a.uploadImage)==null?void 0:r.value;l&&(f.value=!0,m=Promise.resolve().then(()=>l(e)).then(u=>{var c;u&&s.value===e&&(v.value=u,(c=a.onUploadSuccess)==null||c.call(a,u,e))}).catch(u=>{var c;(c=a.onUploadError)==null||c.call(a,u,e)}).finally(()=>{f.value=!1}))},y=e=>{var t;const l=(t=e.clipboardData)==null?void 0:t.items;if(l)for(let r=0;r<l.length;r++){const u=l[r];if(u.type.startsWith("image/")){const c=u.getAsFile();c&&d(c);break}}},b=e=>{e.preventDefault(),e.stopPropagation()},S=e=>{var t,r;e.preventDefault(),e.stopPropagation();const l=(r=(t=e.dataTransfer)==null?void 0:t.files)==null?void 0:r[0];l&&l.type.startsWith("image/")&&d(l)},I=e=>{var r;const l=e.target,t=(r=l.files)==null?void 0:r[0];t&&d(t),l&&(l.value="")},P=e=>{e&&(e.value="",e.click())},k=()=>m??Promise.resolve();return i.onBeforeUnmount(g),{previewUrl:n,file:s,uploadedUrl:v,isUploading:f,onPaste:y,onDrop:S,onDragOver:b,onFileChange:I,pickFile:P,handleImageFile:d,reset:g,setExternalUrl:U,awaitUpload:k}}exports.useImageSearch=L;

package/dist/cjs/components/search/composables/useKeywordHighlight.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=/[.*+?^${}()|[\]\\]/g;function h(t,c){const l=(c||"").trim();if(!l)return[{text:t,match:!1}];const a=l.replace(r,"\\$&"),s=new RegExp(a,"gi"),i=[];let n=0,e;for(;(e=s.exec(t))!==null;){if(e.index===s.lastIndex){s.lastIndex++;continue}e.index>n&&i.push({text:t.slice(n,e.index),match:!1}),i.push({text:e[0],match:!0}),n=e.index+e[0].length}return n<t.length&&i.push({text:t.slice(n),match:!1}),i}exports.highlightKeywordParts=h;

package/dist/cjs/components/search/composables/useSearchHistory.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("vue");function h(v){const{initial:c,storageKey:l,storeHistory:i,maxHistoryCount:u,onChange:o}=v,t=n.ref([...c.value]),f=()=>{if(!(!i.value||typeof localStorage>"u"))try{t.value.length?localStorage.setItem(l.value,JSON.stringify(t.value)):localStorage.removeItem(l.value)}catch{}},s=e=>{t.value=e,f(),o==null||o(t.value)},y=()=>{if(!(!i.value||typeof localStorage>"u"))try{const e=localStorage.getItem(l.value);if(!e)return;const r=JSON.parse(e);if(Array.isArray(r)&&r.length){const a=Array.from(new Set([...r,...t.value]));t.value=a.slice(0,u.value),o==null||o(t.value)}}catch{}},g=e=>{const r=e==null?void 0:e.trim();if(!r)return;const a=[r,...t.value.filter(d=>d!==r)];a.length>u.value&&(a.length=u.value),s(a)},m=e=>{s(t.value.filter(r=>r!==e))},S=()=>{s([])};return n.watch(c,e=>{e!==t.value&&(t.value=[...e])}),n.onMounted(y),{items:t,push:g,remove:m,clearAll:S}}exports.useSearchHistory=h;

package/dist/cjs/components/search/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("./OSearchInput.vue.js"),n=Object.assign(e,{install(t){t.component("OSearchInput",e)}});exports.OSearchInput=n;

package/dist/cjs/components/search/internal/HighlightText.css

@@ -0,0 +1,12 @@
+.hover-icon-rotate .o-icon[data-v-2a99e23c] {
+  transition: all var(--o-duration-m1) var(--o-easing-standard-in);
+}
+@media (hover: hover) {
+.hover-icon-rotate:hover .o-icon[data-v-2a99e23c] {
+    transform: rotate(-180deg);
+}
+}
+.o-search-highlight-text .is-match[data-v-2a99e23c] {
+  color: var(--o-color-primary1);
+  font-weight: 600;
+}

package/dist/cjs/components/search/internal/HighlightText.vue.js

@@ -0,0 +1 @@
+"use strict";const e=require("./HighlightText.vue2.js");;require('./HighlightText.css');const t=require("../../../_plugin-vue_export-helper.js"),r=t(e,[["__scopeId","data-v-2a99e23c"]]);module.exports=r;

package/dist/cjs/components/search/internal/HighlightText.vue2.js

@@ -0,0 +1 @@
+"use strict";const e=require("vue"),c=require("../composables/useKeywordHighlight.js"),a={class:"o-search-highlight-text"},l=e.defineComponent({__name:"HighlightText",props:{text:{},keyword:{},enabled:{type:Boolean,default:!0}},setup(n){const t=n,o=e.computed(()=>!t.enabled||!t.keyword?[{text:t.text,match:!1}]:c.highlightKeywordParts(t.text,t.keyword));return(i,u)=>(e.openBlock(),e.createElementBlock("span",a,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.value,(r,s)=>(e.openBlock(),e.createElementBlock("span",{key:s,class:e.normalizeClass({"is-match":r.match})},e.toDisplayString(r.text),3))),128))]))}});module.exports=l;

package/dist/cjs/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/cjs/components/search/internal/SearchImageInput.vue.js

@@ -0,0 +1 @@
+"use strict";const e=require("./SearchImageInput.vue2.js");;require('./SearchImageInput.css');;require('./SearchImageInput2.css');const r=require("../../../_plugin-vue_export-helper.js"),t=r(e,[["__scopeId","data-v-f28dde35"]]);module.exports=t;

package/dist/cjs/components/search/internal/SearchImageInput.vue2.js

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

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