@opendesign-plus-test/components 0.0.1-rc.47 → 0.0.1-rc.48

package/dist/components/OHeaderSearch.vue.d.ts

@@ -1,4 +1,6 @@
+import { OSearchRecommendItem, OSearchUploadImageFn } from './search/types';
 export interface OHeaderSearchPropsT {
+    /** ---- Backward-compatible props ---- */
     modelValue?: string;
     placeholder?: string;
     expandedPlaceholder?: string;
@@ -11,54 +13,781 @@ export interface OHeaderSearchPropsT {
     storageKey?: string;
     hotItems?: string[];
     hotTitle?: string;
+    /** Legacy plain-string recommend list. Shown when input is empty. */
     recommendItems?: string[];
     searchUrl?: string;
     searchUrlOpenBlank?: boolean;
     searchTextMobile?: string;
-}
-export interface OHeaderSearchEmitsT {
-    (e: 'update:modelValue', value: string): void;
-    (e: 'update:historyItems', value: string[]): void;
-    (e: 'clear'): void;
-    (e: 'search', value: string): void;
-    (e: 'delete-history', value: string[]): void;
-    (e: 'delete-history-item', value: string): void;
+    imagePlaceholder?: string;
+    enableImageSearch?: boolean;
+    imageUrl?: string;
+    uploadImage?: OSearchUploadImageFn;
+    maxImageSize?: number;
+    imageUploadTooltip?: string;
+    suggestItems?: OSearchRecommendItem[];
+    onestepItems?: OSearchRecommendItem[];
+    suggestTitle?: string;
+    onestepTitle?: string;
+    noDataText?: string;
+    highlightKeyword?: boolean;
+    /** Debounce ms for the `input` event */
+    debounce?: number;
+    /** Auto-record history on search; default true */
+    autoSaveHistory?: boolean;
+    /** Show "no data" empty state in suggest section while typing */
+    showSuggestEmpty?: boolean;
+    allowedImageTypes?: string[];
 }
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
         'input-prefix'?(_: {}): any;
-        'input-suffix'?(_: {}): any;
+        'input-suffix'?(_: {
+            hasValue: boolean;
+        }): any;
+        'image-preview'?(_: {
+            previewUrl: string;
+            remove: () => void;
+        }): any;
         drawer?(_: {
             recommendItems: string[];
             historyItems: string[];
             hotItems: string[];
+            suggestItems: OSearchRecommendItem[];
+            onestepItems: OSearchRecommendItem[];
+            keyword: string;
         }): any;
         'recommend-header'?(_: {
-            recommend: string[];
+            items: string[];
         }): any;
         'recommend-content'?(_: {
-            recommend: string[];
+            items: string[];
+        }): any;
+        'onestep-header'?(_: {
+            items: OSearchRecommendItem[];
+        }): any;
+        'onestep-content'?(_: {
+            items: OSearchRecommendItem[];
+            keyword: string;
+        }): any;
+        'suggest-header'?(_: {
+            items: OSearchRecommendItem[];
+        }): any;
+        'suggest-content'?(_: {
+            items: OSearchRecommendItem[];
+            keyword: string;
         }): any;
         'history-header'?(_: {
-            history: string[];
+            items: string[];
         }): any;
         'history-content'?(_: {
-            history: string[];
+            items: string[];
         }): any;
         'hot-header'?(_: {
-            hot: string[];
+            items: string[];
         }): any;
         'hot-content'?(_: {
-            hot: string[];
+            items: string[];
         }): any;
     };
     refs: {
-        posWrapper: HTMLDivElement;
+        wrapperRef: HTMLDivElement;
         inputRef: ({
             $: import('../../vue/dist/vue.esm-bundler.js').ComponentInternalInstance;
             $data: {};
-            $props: Partial<{
+            $props: {
+                readonly [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+                readonly modelValue?: string | undefined;
+                readonly imageUrl?: string | undefined;
+                readonly placeholder?: string | undefined;
+                readonly imagePlaceholder?: string | undefined;
+                readonly size?: "small" | "medium" | "large" | undefined;
+                readonly enableImageSearch?: boolean | undefined;
+                readonly uploadImage?: OSearchUploadImageFn | undefined;
+                readonly maxImageSize?: number | undefined;
+                readonly imageUploadTooltip?: string | undefined;
+                readonly expanded?: boolean | undefined;
+                readonly clearable?: boolean | undefined;
+                readonly showSuffix?: boolean | undefined;
+                readonly inlineThumbnail?: boolean | undefined;
+                readonly preview?: boolean | undefined;
+                readonly disabled?: boolean | undefined;
+                readonly allowedImageTypes?: string[] | undefined;
+            } & import('../../vue/dist/vue.esm-bundler.js').VNodeProps & import('../../vue/dist/vue.esm-bundler.js').AllowedComponentProps & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProps;
+            $attrs: import('../../vue/dist/vue.esm-bundler.js').Attrs;
+            $refs: {
+                [x: string]: unknown;
+            } & {
+                inputRef: ({
+                    $: import('../../vue/dist/vue.esm-bundler.js').ComponentInternalInstance;
+                    $data: {};
+                    $props: Partial<{
+                        color: "normal" | "primary" | "success" | "warning" | "danger";
+                        type: "text" | "password";
+                        disabled: boolean;
+                        variant: "solid" | "outline" | "text";
+                        clearable: boolean;
+                        readonly: boolean;
+                        showLength: "auto" | "always" | "never";
+                        inputOnOutlimit: boolean;
+                        showPasswordEvent: "click" | "pointerdown";
+                        autoWidth: boolean;
+                        passwordPlaceholder: string;
+                        onlyNumericInput: boolean;
+                    }> & Omit<{
+                        readonly type: "text" | "password";
+                        readonly color: "primary" | "normal" | "success" | "warning" | "danger";
+                        readonly variant: "text" | "solid" | "outline";
+                        readonly disabled: boolean;
+                        readonly clearable: boolean;
+                        readonly readonly: boolean;
+                        readonly showLength: "never" | "always" | "auto";
+                        readonly inputOnOutlimit: boolean;
+                        readonly showPasswordEvent: "click" | "pointerdown";
+                        readonly autoWidth: boolean;
+                        readonly passwordPlaceholder: string;
+                        readonly onlyNumericInput: boolean;
+                        readonly size?: "small" | "large" | "medium" | undefined;
+                        readonly round?: import('@opensig/opendesign').RoundT | undefined;
+                        readonly placeholder?: string | undefined;
+                        readonly defaultValue?: string | number | undefined;
+                        readonly modelValue?: string | number | undefined;
+                        readonly inputId?: string | undefined;
+                        readonly minLength?: number | undefined;
+                        readonly maxLength?: number | undefined;
+                        readonly getLength?: ((val: string) => number) | undefined;
+                        readonly format?: ((value: string) => string) | undefined;
+                        readonly validate?: ((value: string) => boolean) | undefined;
+                        readonly valueOnInvalidChange?: boolean | ((inputValue: string, lastValidInputValue: string) => string) | undefined;
+                        readonly onInput?: ((evt: Event, value: string) => any) | undefined | undefined;
+                        readonly onClear?: ((evt?: Event | undefined) => any) | undefined | undefined;
+                        readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
+                        readonly onChange?: ((value: string) => any) | undefined | undefined;
+                        readonly onFocus?: ((evt: FocusEvent) => any) | undefined | undefined;
+                        readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined | undefined;
+                        readonly onPressEnter?: ((evt: KeyboardEvent) => any) | undefined | undefined;
+                    } & import('../../vue/dist/vue.esm-bundler.js').VNodeProps & import('../../vue/dist/vue.esm-bundler.js').AllowedComponentProps & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProps, "type" | "color" | "variant" | "disabled" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput">;
+                    $attrs: import('../../vue/dist/vue.esm-bundler.js').Attrs;
+                    $refs: {
+                        [x: string]: unknown;
+                    };
+                    $slots: Readonly<{
+                        [name: string]: import('../../vue/dist/vue.esm-bundler.js').Slot<any> | undefined;
+                    }>;
+                    $root: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
+                    $parent: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
+                    $host: Element | null;
+                    $emit: ((event: "input", evt: Event, value: string) => void) & ((event: "clear", evt?: Event | undefined) => void) & ((event: "change", value: string) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "pressEnter", evt: KeyboardEvent) => void);
+                    $el: any;
+                    $options: import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsBase<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+                        size: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
+                        };
+                        round: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').RoundT>;
+                        };
+                        color: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').Color2T>;
+                            default: string;
+                        };
+                        variant: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').VariantT>;
+                            default: string;
+                        };
+                        modelValue: {
+                            type: (NumberConstructor | StringConstructor)[];
+                        };
+                        defaultValue: {
+                            type: (NumberConstructor | StringConstructor)[];
+                        };
+                        type: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<"text" | "password">;
+                            default: string;
+                        };
+                        placeholder: {
+                            type: StringConstructor;
+                        };
+                        inputId: {
+                            type: StringConstructor;
+                        };
+                        disabled: {
+                            type: BooleanConstructor;
+                        };
+                        readonly: {
+                            type: BooleanConstructor;
+                        };
+                        clearable: {
+                            type: BooleanConstructor;
+                        };
+                        minLength: {
+                            type: NumberConstructor;
+                        };
+                        maxLength: {
+                            type: NumberConstructor;
+                        };
+                        showLength: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<"always" | "auto" | "never">;
+                            default: string;
+                        };
+                        getLength: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<(val: string) => number>;
+                        };
+                        inputOnOutlimit: {
+                            type: BooleanConstructor;
+                            default: boolean;
+                        };
+                        format: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => string>;
+                        };
+                        validate: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => boolean>;
+                        };
+                        valueOnInvalidChange: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<boolean | ((inputValue: string, lastValidInputValue: string) => string)>;
+                        };
+                        showPasswordEvent: {
+                            type: import('../../vue/dist/vue.esm-bundler.js').PropType<"click" | "pointerdown">;
+                            default: string;
+                        };
+                        autoWidth: {
+                            type: BooleanConstructor;
+                        };
+                        passwordPlaceholder: {
+                            type: StringConstructor;
+                            default: string;
+                        };
+                        onlyNumericInput: {
+                            type: BooleanConstructor;
+                        };
+                    }>> & Readonly<{
+                        onInput?: ((evt: Event, value: string) => any) | undefined;
+                        onClear?: ((evt?: Event | undefined) => any) | undefined;
+                        onBlur?: ((evt: FocusEvent) => any) | undefined;
+                        onChange?: ((value: string) => any) | undefined;
+                        onFocus?: ((evt: FocusEvent) => any) | undefined;
+                        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                        onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
+                    }>, {
+                        focus: () => void | undefined;
+                        blur: () => void | undefined;
+                        clear: () => void | undefined;
+                        inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
+                        togglePassword: () => void | undefined;
+                    }, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
+                        input: (evt: Event, value: string) => any;
+                        clear: (evt?: Event | undefined) => any;
+                        blur: (evt: FocusEvent) => any;
+                        change: (value: string) => any;
+                        focus: (evt: FocusEvent) => any;
+                        "update:modelValue": (value: string) => any;
+                        pressEnter: (evt: KeyboardEvent) => any;
+                    }, string, {
+                        color: "normal" | "primary" | "success" | "warning" | "danger";
+                        type: "text" | "password";
+                        disabled: boolean;
+                        variant: "solid" | "outline" | "text";
+                        clearable: boolean;
+                        readonly: boolean;
+                        showLength: "auto" | "always" | "never";
+                        inputOnOutlimit: boolean;
+                        showPasswordEvent: "click" | "pointerdown";
+                        autoWidth: boolean;
+                        passwordPlaceholder: string;
+                        onlyNumericInput: boolean;
+                    }, {}, string, {}, import('../../vue/dist/vue.esm-bundler.js').GlobalComponents, import('../../vue/dist/vue.esm-bundler.js').GlobalDirectives, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions> & {
+                        beforeCreate?: (() => void) | (() => void)[];
+                        created?: (() => void) | (() => void)[];
+                        beforeMount?: (() => void) | (() => void)[];
+                        mounted?: (() => void) | (() => void)[];
+                        beforeUpdate?: (() => void) | (() => void)[];
+                        updated?: (() => void) | (() => void)[];
+                        activated?: (() => void) | (() => void)[];
+                        deactivated?: (() => void) | (() => void)[];
+                        beforeDestroy?: (() => void) | (() => void)[];
+                        beforeUnmount?: (() => void) | (() => void)[];
+                        destroyed?: (() => void) | (() => void)[];
+                        unmounted?: (() => void) | (() => void)[];
+                        renderTracked?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
+                        renderTriggered?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
+                        errorCaptured?: ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                    };
+                    $forceUpdate: () => void;
+                    $nextTick: typeof import('../../vue/dist/vue.esm-bundler.js').nextTick;
+                    $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('../../vue/dist/vue.esm-bundler.js').WatchOptions): import('../../vue/dist/vue.esm-bundler.js').WatchStopHandle;
+                } & Readonly<{
+                    color: "normal" | "primary" | "success" | "warning" | "danger";
+                    type: "text" | "password";
+                    disabled: boolean;
+                    variant: "solid" | "outline" | "text";
+                    clearable: boolean;
+                    readonly: boolean;
+                    showLength: "auto" | "always" | "never";
+                    inputOnOutlimit: boolean;
+                    showPasswordEvent: "click" | "pointerdown";
+                    autoWidth: boolean;
+                    passwordPlaceholder: string;
+                    onlyNumericInput: boolean;
+                }> & Omit<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+                    size: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
+                    };
+                    round: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').RoundT>;
+                    };
+                    color: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').Color2T>;
+                        default: string;
+                    };
+                    variant: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').VariantT>;
+                        default: string;
+                    };
+                    modelValue: {
+                        type: (NumberConstructor | StringConstructor)[];
+                    };
+                    defaultValue: {
+                        type: (NumberConstructor | StringConstructor)[];
+                    };
+                    type: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<"text" | "password">;
+                        default: string;
+                    };
+                    placeholder: {
+                        type: StringConstructor;
+                    };
+                    inputId: {
+                        type: StringConstructor;
+                    };
+                    disabled: {
+                        type: BooleanConstructor;
+                    };
+                    readonly: {
+                        type: BooleanConstructor;
+                    };
+                    clearable: {
+                        type: BooleanConstructor;
+                    };
+                    minLength: {
+                        type: NumberConstructor;
+                    };
+                    maxLength: {
+                        type: NumberConstructor;
+                    };
+                    showLength: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<"always" | "auto" | "never">;
+                        default: string;
+                    };
+                    getLength: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<(val: string) => number>;
+                    };
+                    inputOnOutlimit: {
+                        type: BooleanConstructor;
+                        default: boolean;
+                    };
+                    format: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => string>;
+                    };
+                    validate: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => boolean>;
+                    };
+                    valueOnInvalidChange: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<boolean | ((inputValue: string, lastValidInputValue: string) => string)>;
+                    };
+                    showPasswordEvent: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<"click" | "pointerdown">;
+                        default: string;
+                    };
+                    autoWidth: {
+                        type: BooleanConstructor;
+                    };
+                    passwordPlaceholder: {
+                        type: StringConstructor;
+                        default: string;
+                    };
+                    onlyNumericInput: {
+                        type: BooleanConstructor;
+                    };
+                }>> & Readonly<{
+                    onInput?: ((evt: Event, value: string) => any) | undefined;
+                    onClear?: ((evt?: Event | undefined) => any) | undefined;
+                    onBlur?: ((evt: FocusEvent) => any) | undefined;
+                    onChange?: ((value: string) => any) | undefined;
+                    onFocus?: ((evt: FocusEvent) => any) | undefined;
+                    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                    onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
+                }>, "type" | "color" | "variant" | "disabled" | "clear" | "blur" | "focus" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput" | "inputEl" | "togglePassword"> & {
+                    focus: () => void | undefined;
+                    blur: () => void | undefined;
+                    clear: () => void | undefined;
+                    inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
+                    togglePassword: () => void | undefined;
+                } & {} & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProperties & {} & {
+                    $slots: Readonly<{
+                        default(): any;
+                        prepend(): any;
+                        append(): any;
+                        prefix(): any;
+                        suffix(): any;
+                    }> & {
+                        default(): any;
+                        prepend(): any;
+                        append(): any;
+                        prefix(): any;
+                        suffix(): any;
+                    };
+                }) | null;
+                uploadBtnRef: HTMLSpanElement;
+                fileInputRef: HTMLInputElement;
+            };
+            $slots: Readonly<{
+                [name: string]: import('../../vue/dist/vue.esm-bundler.js').Slot<any> | undefined;
+            }>;
+            $root: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
+            $parent: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
+            $host: Element | null;
+            $emit: (event: string, ...args: any[]) => void;
+            $el: HTMLDivElement;
+            $options: import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsBase<Readonly<import('./search/internal/SearchImageInput.vue').SearchImageInputPropsT> & Readonly<{
+                [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+            }>, {
+                focus: () => void | undefined;
+                blur: () => void | undefined;
+                awaitUpload: () => Promise<void>;
+                getUploadedUrl: () => string;
+                getIsUploading: () => boolean;
+                resetImage: () => void;
+            }, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
+                [x: string]: any;
+            } & {
+                [x: string]: any;
+            }, string, {
+                size: "small" | "medium" | "large";
+                disabled: boolean;
+                preview: boolean;
+                modelValue: string;
+                imageUrl: string;
+                enableImageSearch: boolean;
+                maxImageSize: number;
+                expanded: boolean;
+                clearable: boolean;
+                showSuffix: boolean;
+                inlineThumbnail: boolean;
+                allowedImageTypes: string[];
+            }, {}, string, {}, import('../../vue/dist/vue.esm-bundler.js').GlobalComponents, import('../../vue/dist/vue.esm-bundler.js').GlobalDirectives, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions> & {
+                beforeCreate?: (() => void) | (() => void)[];
+                created?: (() => void) | (() => void)[];
+                beforeMount?: (() => void) | (() => void)[];
+                mounted?: (() => void) | (() => void)[];
+                beforeUpdate?: (() => void) | (() => void)[];
+                updated?: (() => void) | (() => void)[];
+                activated?: (() => void) | (() => void)[];
+                deactivated?: (() => void) | (() => void)[];
+                beforeDestroy?: (() => void) | (() => void)[];
+                beforeUnmount?: (() => void) | (() => void)[];
+                destroyed?: (() => void) | (() => void)[];
+                unmounted?: (() => void) | (() => void)[];
+                renderTracked?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
+                renderTriggered?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
+                errorCaptured?: ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void)[];
+            };
+            $forceUpdate: () => void;
+            $nextTick: typeof import('../../vue/dist/vue.esm-bundler.js').nextTick;
+            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('../../vue/dist/vue.esm-bundler.js').WatchOptions): import('../../vue/dist/vue.esm-bundler.js').WatchStopHandle;
+        } & Readonly<{
+            size: "small" | "medium" | "large";
+            disabled: boolean;
+            preview: boolean;
+            modelValue: string;
+            imageUrl: string;
+            enableImageSearch: boolean;
+            maxImageSize: number;
+            expanded: boolean;
+            clearable: boolean;
+            showSuffix: boolean;
+            inlineThumbnail: boolean;
+            allowedImageTypes: string[];
+        }> & Omit<Readonly<import('./search/internal/SearchImageInput.vue').SearchImageInputPropsT> & Readonly<{
+            [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+        }>, "blur" | "focus" | "awaitUpload" | "getUploadedUrl" | "getIsUploading" | "resetImage" | ("size" | "disabled" | "preview" | "modelValue" | "imageUrl" | "enableImageSearch" | "maxImageSize" | "expanded" | "clearable" | "showSuffix" | "inlineThumbnail" | "allowedImageTypes")> & {
+            focus: () => void | undefined;
+            blur: () => void | undefined;
+            awaitUpload: () => Promise<void>;
+            getUploadedUrl: () => string;
+            getIsUploading: () => boolean;
+            resetImage: () => void;
+        } & {} & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProperties & {} & {
+            $slots: {
+                prefix?(_: {}): any;
+                suffix?(_: {
+                    hasValue: boolean;
+                }): any;
+                preview?(_: {
+                    previewUrl: string;
+                    remove: () => void;
+                }): any;
+            };
+        }) | null;
+    };
+    rootEl: HTMLDivElement;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+declare const __VLS_component: import('../../vue/dist/vue.esm-bundler.js').DefineComponent<OHeaderSearchPropsT, {
+    focus: () => void | undefined;
+    blur: () => void | undefined;
+    open: () => void;
+    close: () => void;
+    search: () => Promise<void>;
+}, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
+    [x: string]: any;
+} & {
+    [x: string]: any;
+}, string, import('../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<OHeaderSearchPropsT> & Readonly<{
+    [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+}>, {
+    modelValue: string;
+    imageUrl: string;
+    enableImageSearch: boolean;
+    maxImageSize: number;
+    clearable: boolean;
+    onestepItems: OSearchRecommendItem[];
+    suggestItems: OSearchRecommendItem[];
+    recommendItems: string[];
+    historyItems: string[];
+    hotItems: string[];
+    highlightKeyword: boolean;
+    showSuggestEmpty: boolean;
+    storageKey: string;
+    storeHistory: boolean;
+    maxHistoryCount: number;
+    expandDirection: "left" | "right";
+    searchUrlOpenBlank: boolean;
+    debounce: number;
+    autoSaveHistory: boolean;
+}, {}, {}, {}, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, false, {
+    wrapperRef: HTMLDivElement;
+    inputRef: ({
+        $: import('../../vue/dist/vue.esm-bundler.js').ComponentInternalInstance;
+        $data: {};
+        $props: {
+            readonly [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+            readonly modelValue?: string | undefined;
+            readonly imageUrl?: string | undefined;
+            readonly placeholder?: string | undefined;
+            readonly imagePlaceholder?: string | undefined;
+            readonly size?: "small" | "medium" | "large" | undefined;
+            readonly enableImageSearch?: boolean | undefined;
+            readonly uploadImage?: OSearchUploadImageFn | undefined;
+            readonly maxImageSize?: number | undefined;
+            readonly imageUploadTooltip?: string | undefined;
+            readonly expanded?: boolean | undefined;
+            readonly clearable?: boolean | undefined;
+            readonly showSuffix?: boolean | undefined;
+            readonly inlineThumbnail?: boolean | undefined;
+            readonly preview?: boolean | undefined;
+            readonly disabled?: boolean | undefined;
+            readonly allowedImageTypes?: string[] | undefined;
+        } & import('../../vue/dist/vue.esm-bundler.js').VNodeProps & import('../../vue/dist/vue.esm-bundler.js').AllowedComponentProps & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProps;
+        $attrs: import('../../vue/dist/vue.esm-bundler.js').Attrs;
+        $refs: {
+            [x: string]: unknown;
+        } & {
+            inputRef: ({
+                $: import('../../vue/dist/vue.esm-bundler.js').ComponentInternalInstance;
+                $data: {};
+                $props: Partial<{
+                    color: "normal" | "primary" | "success" | "warning" | "danger";
+                    type: "text" | "password";
+                    disabled: boolean;
+                    variant: "solid" | "outline" | "text";
+                    clearable: boolean;
+                    readonly: boolean;
+                    showLength: "auto" | "always" | "never";
+                    inputOnOutlimit: boolean;
+                    showPasswordEvent: "click" | "pointerdown";
+                    autoWidth: boolean;
+                    passwordPlaceholder: string;
+                    onlyNumericInput: boolean;
+                }> & Omit<{
+                    readonly type: "text" | "password";
+                    readonly color: "primary" | "normal" | "success" | "warning" | "danger";
+                    readonly variant: "text" | "solid" | "outline";
+                    readonly disabled: boolean;
+                    readonly clearable: boolean;
+                    readonly readonly: boolean;
+                    readonly showLength: "never" | "always" | "auto";
+                    readonly inputOnOutlimit: boolean;
+                    readonly showPasswordEvent: "click" | "pointerdown";
+                    readonly autoWidth: boolean;
+                    readonly passwordPlaceholder: string;
+                    readonly onlyNumericInput: boolean;
+                    readonly size?: "small" | "large" | "medium" | undefined;
+                    readonly round?: import('@opensig/opendesign').RoundT | undefined;
+                    readonly placeholder?: string | undefined;
+                    readonly defaultValue?: string | number | undefined;
+                    readonly modelValue?: string | number | undefined;
+                    readonly inputId?: string | undefined;
+                    readonly minLength?: number | undefined;
+                    readonly maxLength?: number | undefined;
+                    readonly getLength?: ((val: string) => number) | undefined;
+                    readonly format?: ((value: string) => string) | undefined;
+                    readonly validate?: ((value: string) => boolean) | undefined;
+                    readonly valueOnInvalidChange?: boolean | ((inputValue: string, lastValidInputValue: string) => string) | undefined;
+                    readonly onInput?: ((evt: Event, value: string) => any) | undefined | undefined;
+                    readonly onClear?: ((evt?: Event | undefined) => any) | undefined | undefined;
+                    readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
+                    readonly onChange?: ((value: string) => any) | undefined | undefined;
+                    readonly onFocus?: ((evt: FocusEvent) => any) | undefined | undefined;
+                    readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined | undefined;
+                    readonly onPressEnter?: ((evt: KeyboardEvent) => any) | undefined | undefined;
+                } & import('../../vue/dist/vue.esm-bundler.js').VNodeProps & import('../../vue/dist/vue.esm-bundler.js').AllowedComponentProps & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProps, "type" | "color" | "variant" | "disabled" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput">;
+                $attrs: import('../../vue/dist/vue.esm-bundler.js').Attrs;
+                $refs: {
+                    [x: string]: unknown;
+                };
+                $slots: Readonly<{
+                    [name: string]: import('../../vue/dist/vue.esm-bundler.js').Slot<any> | undefined;
+                }>;
+                $root: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
+                $parent: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
+                $host: Element | null;
+                $emit: ((event: "input", evt: Event, value: string) => void) & ((event: "clear", evt?: Event | undefined) => void) & ((event: "change", value: string) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "pressEnter", evt: KeyboardEvent) => void);
+                $el: any;
+                $options: import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsBase<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+                    size: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
+                    };
+                    round: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').RoundT>;
+                    };
+                    color: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').Color2T>;
+                        default: string;
+                    };
+                    variant: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').VariantT>;
+                        default: string;
+                    };
+                    modelValue: {
+                        type: (NumberConstructor | StringConstructor)[];
+                    };
+                    defaultValue: {
+                        type: (NumberConstructor | StringConstructor)[];
+                    };
+                    type: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<"text" | "password">;
+                        default: string;
+                    };
+                    placeholder: {
+                        type: StringConstructor;
+                    };
+                    inputId: {
+                        type: StringConstructor;
+                    };
+                    disabled: {
+                        type: BooleanConstructor;
+                    };
+                    readonly: {
+                        type: BooleanConstructor;
+                    };
+                    clearable: {
+                        type: BooleanConstructor;
+                    };
+                    minLength: {
+                        type: NumberConstructor;
+                    };
+                    maxLength: {
+                        type: NumberConstructor;
+                    };
+                    showLength: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<"always" | "auto" | "never">;
+                        default: string;
+                    };
+                    getLength: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<(val: string) => number>;
+                    };
+                    inputOnOutlimit: {
+                        type: BooleanConstructor;
+                        default: boolean;
+                    };
+                    format: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => string>;
+                    };
+                    validate: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => boolean>;
+                    };
+                    valueOnInvalidChange: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<boolean | ((inputValue: string, lastValidInputValue: string) => string)>;
+                    };
+                    showPasswordEvent: {
+                        type: import('../../vue/dist/vue.esm-bundler.js').PropType<"click" | "pointerdown">;
+                        default: string;
+                    };
+                    autoWidth: {
+                        type: BooleanConstructor;
+                    };
+                    passwordPlaceholder: {
+                        type: StringConstructor;
+                        default: string;
+                    };
+                    onlyNumericInput: {
+                        type: BooleanConstructor;
+                    };
+                }>> & Readonly<{
+                    onInput?: ((evt: Event, value: string) => any) | undefined;
+                    onClear?: ((evt?: Event | undefined) => any) | undefined;
+                    onBlur?: ((evt: FocusEvent) => any) | undefined;
+                    onChange?: ((value: string) => any) | undefined;
+                    onFocus?: ((evt: FocusEvent) => any) | undefined;
+                    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+                    onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
+                }>, {
+                    focus: () => void | undefined;
+                    blur: () => void | undefined;
+                    clear: () => void | undefined;
+                    inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
+                    togglePassword: () => void | undefined;
+                }, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
+                    input: (evt: Event, value: string) => any;
+                    clear: (evt?: Event | undefined) => any;
+                    blur: (evt: FocusEvent) => any;
+                    change: (value: string) => any;
+                    focus: (evt: FocusEvent) => any;
+                    "update:modelValue": (value: string) => any;
+                    pressEnter: (evt: KeyboardEvent) => any;
+                }, string, {
+                    color: "normal" | "primary" | "success" | "warning" | "danger";
+                    type: "text" | "password";
+                    disabled: boolean;
+                    variant: "solid" | "outline" | "text";
+                    clearable: boolean;
+                    readonly: boolean;
+                    showLength: "auto" | "always" | "never";
+                    inputOnOutlimit: boolean;
+                    showPasswordEvent: "click" | "pointerdown";
+                    autoWidth: boolean;
+                    passwordPlaceholder: string;
+                    onlyNumericInput: boolean;
+                }, {}, string, {}, import('../../vue/dist/vue.esm-bundler.js').GlobalComponents, import('../../vue/dist/vue.esm-bundler.js').GlobalDirectives, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions> & {
+                    beforeCreate?: (() => void) | (() => void)[];
+                    created?: (() => void) | (() => void)[];
+                    beforeMount?: (() => void) | (() => void)[];
+                    mounted?: (() => void) | (() => void)[];
+                    beforeUpdate?: (() => void) | (() => void)[];
+                    updated?: (() => void) | (() => void)[];
+                    activated?: (() => void) | (() => void)[];
+                    deactivated?: (() => void) | (() => void)[];
+                    beforeDestroy?: (() => void) | (() => void)[];
+                    beforeUnmount?: (() => void) | (() => void)[];
+                    destroyed?: (() => void) | (() => void)[];
+                    unmounted?: (() => void) | (() => void)[];
+                    renderTracked?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
+                    renderTriggered?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
+                    errorCaptured?: ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void)[];
+                };
+                $forceUpdate: () => void;
+                $nextTick: typeof import('../../vue/dist/vue.esm-bundler.js').nextTick;
+                $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('../../vue/dist/vue.esm-bundler.js').WatchOptions): import('../../vue/dist/vue.esm-bundler.js').WatchStopHandle;
+            } & Readonly<{
                 color: "normal" | "primary" | "success" | "warning" | "danger";
                 type: "text" | "password";
                 disabled: boolean;
@@ -71,52 +800,7 @@ declare function __VLS_template(): {
                 autoWidth: boolean;
                 passwordPlaceholder: string;
                 onlyNumericInput: boolean;
-            }> & Omit<{
-                readonly type: "text" | "password";
-                readonly color: "primary" | "normal" | "success" | "warning" | "danger";
-                readonly variant: "text" | "solid" | "outline";
-                readonly disabled: boolean;
-                readonly clearable: boolean;
-                readonly readonly: boolean;
-                readonly showLength: "never" | "always" | "auto";
-                readonly inputOnOutlimit: boolean;
-                readonly showPasswordEvent: "click" | "pointerdown";
-                readonly autoWidth: boolean;
-                readonly passwordPlaceholder: string;
-                readonly onlyNumericInput: boolean;
-                readonly size?: "small" | "large" | "medium" | undefined;
-                readonly round?: import('@opensig/opendesign').RoundT | undefined;
-                readonly placeholder?: string | undefined;
-                readonly defaultValue?: string | number | undefined;
-                readonly modelValue?: string | number | undefined;
-                readonly inputId?: string | undefined;
-                readonly minLength?: number | undefined;
-                readonly maxLength?: number | undefined;
-                readonly getLength?: ((val: string) => number) | undefined;
-                readonly format?: ((value: string) => string) | undefined;
-                readonly validate?: ((value: string) => boolean) | undefined;
-                readonly valueOnInvalidChange?: boolean | ((inputValue: string, lastValidInputValue: string) => string) | undefined;
-                readonly onInput?: ((evt: Event, value: string) => any) | undefined | undefined;
-                readonly onClear?: ((evt?: Event | undefined) => any) | undefined | undefined;
-                readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
-                readonly onChange?: ((value: string) => any) | undefined | undefined;
-                readonly onFocus?: ((evt: FocusEvent) => any) | undefined | undefined;
-                readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined | undefined;
-                readonly onPressEnter?: ((evt: KeyboardEvent) => any) | undefined | undefined;
-            } & import('../../vue/dist/vue.esm-bundler.js').VNodeProps & import('../../vue/dist/vue.esm-bundler.js').AllowedComponentProps & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProps, "type" | "color" | "variant" | "disabled" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput">;
-            $attrs: import('../../vue/dist/vue.esm-bundler.js').Attrs;
-            $refs: {
-                [x: string]: unknown;
-            };
-            $slots: Readonly<{
-                [name: string]: import('../../vue/dist/vue.esm-bundler.js').Slot<any> | undefined;
-            }>;
-            $root: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
-            $parent: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
-            $host: Element | null;
-            $emit: ((event: "input", evt: Event, value: string) => void) & ((event: "clear", evt?: Event | undefined) => void) & ((event: "change", value: string) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "pressEnter", evt: KeyboardEvent) => void);
-            $el: any;
-            $options: import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsBase<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
+            }> & Omit<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
                 size: {
                     type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
                 };
@@ -204,258 +888,29 @@ declare function __VLS_template(): {
                 onFocus?: ((evt: FocusEvent) => any) | undefined;
                 "onUpdate:modelValue"?: ((value: string) => any) | undefined;
                 onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
-            }>, {
+            }>, "type" | "color" | "variant" | "disabled" | "clear" | "blur" | "focus" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput" | "inputEl" | "togglePassword"> & {
                 focus: () => void | undefined;
                 blur: () => void | undefined;
                 clear: () => void | undefined;
                 inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
                 togglePassword: () => void | undefined;
-            }, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
-                input: (evt: Event, value: string) => any;
-                clear: (evt?: Event | undefined) => any;
-                blur: (evt: FocusEvent) => any;
-                change: (value: string) => any;
-                focus: (evt: FocusEvent) => any;
-                "update:modelValue": (value: string) => any;
-                pressEnter: (evt: KeyboardEvent) => any;
-            }, string, {
-                color: "normal" | "primary" | "success" | "warning" | "danger";
-                type: "text" | "password";
-                disabled: boolean;
-                variant: "solid" | "outline" | "text";
-                clearable: boolean;
-                readonly: boolean;
-                showLength: "auto" | "always" | "never";
-                inputOnOutlimit: boolean;
-                showPasswordEvent: "click" | "pointerdown";
-                autoWidth: boolean;
-                passwordPlaceholder: string;
-                onlyNumericInput: boolean;
-            }, {}, string, {}, import('../../vue/dist/vue.esm-bundler.js').GlobalComponents, import('../../vue/dist/vue.esm-bundler.js').GlobalDirectives, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions> & {
-                beforeCreate?: (() => void) | (() => void)[];
-                created?: (() => void) | (() => void)[];
-                beforeMount?: (() => void) | (() => void)[];
-                mounted?: (() => void) | (() => void)[];
-                beforeUpdate?: (() => void) | (() => void)[];
-                updated?: (() => void) | (() => void)[];
-                activated?: (() => void) | (() => void)[];
-                deactivated?: (() => void) | (() => void)[];
-                beforeDestroy?: (() => void) | (() => void)[];
-                beforeUnmount?: (() => void) | (() => void)[];
-                destroyed?: (() => void) | (() => void)[];
-                unmounted?: (() => void) | (() => void)[];
-                renderTracked?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
-                renderTriggered?: ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void) | ((e: import('../../vue/dist/vue.esm-bundler.js').DebuggerEvent) => void)[];
-                errorCaptured?: ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void) | ((err: unknown, instance: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null, info: string) => boolean | void)[];
-            };
-            $forceUpdate: () => void;
-            $nextTick: typeof import('../../vue/dist/vue.esm-bundler.js').nextTick;
-            $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('../../vue/dist/vue.esm-bundler.js').WatchOptions): import('../../vue/dist/vue.esm-bundler.js').WatchStopHandle;
-        } & Readonly<{
-            color: "normal" | "primary" | "success" | "warning" | "danger";
-            type: "text" | "password";
-            disabled: boolean;
-            variant: "solid" | "outline" | "text";
-            clearable: boolean;
-            readonly: boolean;
-            showLength: "auto" | "always" | "never";
-            inputOnOutlimit: boolean;
-            showPasswordEvent: "click" | "pointerdown";
-            autoWidth: boolean;
-            passwordPlaceholder: string;
-            onlyNumericInput: boolean;
-        }> & Omit<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
-            size: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
-            };
-            round: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').RoundT>;
-            };
-            color: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').Color2T>;
-                default: string;
-            };
-            variant: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').VariantT>;
-                default: string;
-            };
-            modelValue: {
-                type: (NumberConstructor | StringConstructor)[];
-            };
-            defaultValue: {
-                type: (NumberConstructor | StringConstructor)[];
-            };
-            type: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<"text" | "password">;
-                default: string;
-            };
-            placeholder: {
-                type: StringConstructor;
-            };
-            inputId: {
-                type: StringConstructor;
-            };
-            disabled: {
-                type: BooleanConstructor;
-            };
-            readonly: {
-                type: BooleanConstructor;
-            };
-            clearable: {
-                type: BooleanConstructor;
-            };
-            minLength: {
-                type: NumberConstructor;
-            };
-            maxLength: {
-                type: NumberConstructor;
-            };
-            showLength: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<"always" | "auto" | "never">;
-                default: string;
-            };
-            getLength: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<(val: string) => number>;
-            };
-            inputOnOutlimit: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            format: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => string>;
-            };
-            validate: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => boolean>;
-            };
-            valueOnInvalidChange: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<boolean | ((inputValue: string, lastValidInputValue: string) => string)>;
-            };
-            showPasswordEvent: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<"click" | "pointerdown">;
-                default: string;
-            };
-            autoWidth: {
-                type: BooleanConstructor;
-            };
-            passwordPlaceholder: {
-                type: StringConstructor;
-                default: string;
-            };
-            onlyNumericInput: {
-                type: BooleanConstructor;
-            };
-        }>> & Readonly<{
-            onInput?: ((evt: Event, value: string) => any) | undefined;
-            onClear?: ((evt?: Event | undefined) => any) | undefined;
-            onBlur?: ((evt: FocusEvent) => any) | undefined;
-            onChange?: ((value: string) => any) | undefined;
-            onFocus?: ((evt: FocusEvent) => any) | undefined;
-            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-            onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
-        }>, "type" | "color" | "variant" | "disabled" | "clear" | "blur" | "focus" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput" | "inputEl" | "togglePassword"> & {
-            focus: () => void | undefined;
-            blur: () => void | undefined;
-            clear: () => void | undefined;
-            inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
-            togglePassword: () => void | undefined;
-        } & {} & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProperties & {} & {
-            $slots: Readonly<{
-                default(): any;
-                prepend(): any;
-                append(): any;
-                prefix(): any;
-                suffix(): any;
-            }> & {
-                default(): any;
-                prepend(): any;
-                append(): any;
-                prefix(): any;
-                suffix(): any;
-            };
-        }) | null;
-    };
-    rootEl: HTMLDivElement;
-};
-type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
-declare const __VLS_component: import('../../vue/dist/vue.esm-bundler.js').DefineComponent<OHeaderSearchPropsT, {}, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {} & {
-    search: (value: string) => any;
-    clear: () => any;
-    "update:modelValue": (value: string) => any;
-    "update:historyItems": (value: string[]) => any;
-    "delete-history": (value: string[]) => any;
-    "delete-history-item": (value: string) => any;
-}, string, import('../../vue/dist/vue.esm-bundler.js').PublicProps, Readonly<OHeaderSearchPropsT> & Readonly<{
-    onSearch?: ((value: string) => any) | undefined;
-    onClear?: (() => any) | undefined;
-    "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-    "onUpdate:historyItems"?: ((value: string[]) => any) | undefined;
-    "onDelete-history"?: ((value: string[]) => any) | undefined;
-    "onDelete-history-item"?: ((value: string) => any) | undefined;
-}>, {
-    modelValue: string;
-    expandDirection: "left" | "right";
-    clearable: boolean;
-    historyItems: string[];
-    maxHistoryCount: number;
-    storeHistory: boolean;
-    storageKey: string;
-    hotItems: string[];
-    recommendItems: string[];
-    searchUrlOpenBlank: boolean;
-}, {}, {}, {}, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions, false, {
-    posWrapper: HTMLDivElement;
-    inputRef: ({
-        $: import('../../vue/dist/vue.esm-bundler.js').ComponentInternalInstance;
-        $data: {};
-        $props: Partial<{
-            color: "normal" | "primary" | "success" | "warning" | "danger";
-            type: "text" | "password";
-            disabled: boolean;
-            variant: "solid" | "outline" | "text";
-            clearable: boolean;
-            readonly: boolean;
-            showLength: "auto" | "always" | "never";
-            inputOnOutlimit: boolean;
-            showPasswordEvent: "click" | "pointerdown";
-            autoWidth: boolean;
-            passwordPlaceholder: string;
-            onlyNumericInput: boolean;
-        }> & Omit<{
-            readonly type: "text" | "password";
-            readonly color: "primary" | "normal" | "success" | "warning" | "danger";
-            readonly variant: "text" | "solid" | "outline";
-            readonly disabled: boolean;
-            readonly clearable: boolean;
-            readonly readonly: boolean;
-            readonly showLength: "never" | "always" | "auto";
-            readonly inputOnOutlimit: boolean;
-            readonly showPasswordEvent: "click" | "pointerdown";
-            readonly autoWidth: boolean;
-            readonly passwordPlaceholder: string;
-            readonly onlyNumericInput: boolean;
-            readonly size?: "small" | "large" | "medium" | undefined;
-            readonly round?: import('@opensig/opendesign').RoundT | undefined;
-            readonly placeholder?: string | undefined;
-            readonly defaultValue?: string | number | undefined;
-            readonly modelValue?: string | number | undefined;
-            readonly inputId?: string | undefined;
-            readonly minLength?: number | undefined;
-            readonly maxLength?: number | undefined;
-            readonly getLength?: ((val: string) => number) | undefined;
-            readonly format?: ((value: string) => string) | undefined;
-            readonly validate?: ((value: string) => boolean) | undefined;
-            readonly valueOnInvalidChange?: boolean | ((inputValue: string, lastValidInputValue: string) => string) | undefined;
-            readonly onInput?: ((evt: Event, value: string) => any) | undefined | undefined;
-            readonly onClear?: ((evt?: Event | undefined) => any) | undefined | undefined;
-            readonly onBlur?: ((evt: FocusEvent) => any) | undefined | undefined;
-            readonly onChange?: ((value: string) => any) | undefined | undefined;
-            readonly onFocus?: ((evt: FocusEvent) => any) | undefined | undefined;
-            readonly "onUpdate:modelValue"?: ((value: string) => any) | undefined | undefined;
-            readonly onPressEnter?: ((evt: KeyboardEvent) => any) | undefined | undefined;
-        } & import('../../vue/dist/vue.esm-bundler.js').VNodeProps & import('../../vue/dist/vue.esm-bundler.js').AllowedComponentProps & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProps, "type" | "color" | "variant" | "disabled" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput">;
-        $attrs: import('../../vue/dist/vue.esm-bundler.js').Attrs;
-        $refs: {
-            [x: string]: unknown;
+            } & {} & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProperties & {} & {
+                $slots: Readonly<{
+                    default(): any;
+                    prepend(): any;
+                    append(): any;
+                    prefix(): any;
+                    suffix(): any;
+                }> & {
+                    default(): any;
+                    prepend(): any;
+                    append(): any;
+                    prefix(): any;
+                    suffix(): any;
+                };
+            }) | null;
+            uploadBtnRef: HTMLSpanElement;
+            fileInputRef: HTMLInputElement;
         };
         $slots: Readonly<{
             [name: string]: import('../../vue/dist/vue.esm-bundler.js').Slot<any> | undefined;
@@ -463,123 +918,34 @@ declare const __VLS_component: import('../../vue/dist/vue.esm-bundler.js').Defin
         $root: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
         $parent: import('../../vue/dist/vue.esm-bundler.js').ComponentPublicInstance | null;
         $host: Element | null;
-        $emit: ((event: "input", evt: Event, value: string) => void) & ((event: "clear", evt?: Event | undefined) => void) & ((event: "change", value: string) => void) & ((event: "blur", evt: FocusEvent) => void) & ((event: "focus", evt: FocusEvent) => void) & ((event: "update:modelValue", value: string) => void) & ((event: "pressEnter", evt: KeyboardEvent) => void);
-        $el: any;
-        $options: import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsBase<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
-            size: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
-            };
-            round: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').RoundT>;
-            };
-            color: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').Color2T>;
-                default: string;
-            };
-            variant: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').VariantT>;
-                default: string;
-            };
-            modelValue: {
-                type: (NumberConstructor | StringConstructor)[];
-            };
-            defaultValue: {
-                type: (NumberConstructor | StringConstructor)[];
-            };
-            type: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<"text" | "password">;
-                default: string;
-            };
-            placeholder: {
-                type: StringConstructor;
-            };
-            inputId: {
-                type: StringConstructor;
-            };
-            disabled: {
-                type: BooleanConstructor;
-            };
-            readonly: {
-                type: BooleanConstructor;
-            };
-            clearable: {
-                type: BooleanConstructor;
-            };
-            minLength: {
-                type: NumberConstructor;
-            };
-            maxLength: {
-                type: NumberConstructor;
-            };
-            showLength: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<"always" | "auto" | "never">;
-                default: string;
-            };
-            getLength: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<(val: string) => number>;
-            };
-            inputOnOutlimit: {
-                type: BooleanConstructor;
-                default: boolean;
-            };
-            format: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => string>;
-            };
-            validate: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => boolean>;
-            };
-            valueOnInvalidChange: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<boolean | ((inputValue: string, lastValidInputValue: string) => string)>;
-            };
-            showPasswordEvent: {
-                type: import('../../vue/dist/vue.esm-bundler.js').PropType<"click" | "pointerdown">;
-                default: string;
-            };
-            autoWidth: {
-                type: BooleanConstructor;
-            };
-            passwordPlaceholder: {
-                type: StringConstructor;
-                default: string;
-            };
-            onlyNumericInput: {
-                type: BooleanConstructor;
-            };
-        }>> & Readonly<{
-            onInput?: ((evt: Event, value: string) => any) | undefined;
-            onClear?: ((evt?: Event | undefined) => any) | undefined;
-            onBlur?: ((evt: FocusEvent) => any) | undefined;
-            onChange?: ((value: string) => any) | undefined;
-            onFocus?: ((evt: FocusEvent) => any) | undefined;
-            "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-            onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
+        $emit: (event: string, ...args: any[]) => void;
+        $el: HTMLDivElement;
+        $options: import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsBase<Readonly<import('./search/internal/SearchImageInput.vue').SearchImageInputPropsT> & Readonly<{
+            [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
         }>, {
             focus: () => void | undefined;
             blur: () => void | undefined;
-            clear: () => void | undefined;
-            inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
-            togglePassword: () => void | undefined;
+            awaitUpload: () => Promise<void>;
+            getUploadedUrl: () => string;
+            getIsUploading: () => boolean;
+            resetImage: () => void;
         }, {}, {}, {}, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, import('../../vue/dist/vue.esm-bundler.js').ComponentOptionsMixin, {
-            input: (evt: Event, value: string) => any;
-            clear: (evt?: Event | undefined) => any;
-            blur: (evt: FocusEvent) => any;
-            change: (value: string) => any;
-            focus: (evt: FocusEvent) => any;
-            "update:modelValue": (value: string) => any;
-            pressEnter: (evt: KeyboardEvent) => any;
+            [x: string]: any;
+        } & {
+            [x: string]: any;
         }, string, {
-            color: "normal" | "primary" | "success" | "warning" | "danger";
-            type: "text" | "password";
+            size: "small" | "medium" | "large";
             disabled: boolean;
-            variant: "solid" | "outline" | "text";
+            preview: boolean;
+            modelValue: string;
+            imageUrl: string;
+            enableImageSearch: boolean;
+            maxImageSize: number;
+            expanded: boolean;
             clearable: boolean;
-            readonly: boolean;
-            showLength: "auto" | "always" | "never";
-            inputOnOutlimit: boolean;
-            showPasswordEvent: "click" | "pointerdown";
-            autoWidth: boolean;
-            passwordPlaceholder: string;
-            onlyNumericInput: boolean;
+            showSuffix: boolean;
+            inlineThumbnail: boolean;
+            allowedImageTypes: string[];
         }, {}, string, {}, import('../../vue/dist/vue.esm-bundler.js').GlobalComponents, import('../../vue/dist/vue.esm-bundler.js').GlobalDirectives, string, import('../../vue/dist/vue.esm-bundler.js').ComponentProvideOptions> & {
             beforeCreate?: (() => void) | (() => void)[];
             created?: (() => void) | (() => void)[];
@@ -601,125 +967,37 @@ declare const __VLS_component: import('../../vue/dist/vue.esm-bundler.js').Defin
         $nextTick: typeof import('../../vue/dist/vue.esm-bundler.js').nextTick;
         $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (...args: [R, R, import('@vue/reactivity').OnCleanup]) => any : (...args: [any, any, import('@vue/reactivity').OnCleanup]) => any, options?: import('../../vue/dist/vue.esm-bundler.js').WatchOptions): import('../../vue/dist/vue.esm-bundler.js').WatchStopHandle;
     } & Readonly<{
-        color: "normal" | "primary" | "success" | "warning" | "danger";
-        type: "text" | "password";
+        size: "small" | "medium" | "large";
         disabled: boolean;
-        variant: "solid" | "outline" | "text";
+        preview: boolean;
+        modelValue: string;
+        imageUrl: string;
+        enableImageSearch: boolean;
+        maxImageSize: number;
+        expanded: boolean;
         clearable: boolean;
-        readonly: boolean;
-        showLength: "auto" | "always" | "never";
-        inputOnOutlimit: boolean;
-        showPasswordEvent: "click" | "pointerdown";
-        autoWidth: boolean;
-        passwordPlaceholder: string;
-        onlyNumericInput: boolean;
-    }> & Omit<Readonly<import('../../vue/dist/vue.esm-bundler.js').ExtractPropTypes<{
-        size: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').SizeT>;
-        };
-        round: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').RoundT>;
-        };
-        color: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').Color2T>;
-            default: string;
-        };
-        variant: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<import('@opensig/opendesign').VariantT>;
-            default: string;
-        };
-        modelValue: {
-            type: (NumberConstructor | StringConstructor)[];
-        };
-        defaultValue: {
-            type: (NumberConstructor | StringConstructor)[];
-        };
-        type: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<"text" | "password">;
-            default: string;
-        };
-        placeholder: {
-            type: StringConstructor;
-        };
-        inputId: {
-            type: StringConstructor;
-        };
-        disabled: {
-            type: BooleanConstructor;
-        };
-        readonly: {
-            type: BooleanConstructor;
-        };
-        clearable: {
-            type: BooleanConstructor;
-        };
-        minLength: {
-            type: NumberConstructor;
-        };
-        maxLength: {
-            type: NumberConstructor;
-        };
-        showLength: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<"always" | "auto" | "never">;
-            default: string;
-        };
-        getLength: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<(val: string) => number>;
-        };
-        inputOnOutlimit: {
-            type: BooleanConstructor;
-            default: boolean;
-        };
-        format: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => string>;
-        };
-        validate: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<(value: string) => boolean>;
-        };
-        valueOnInvalidChange: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<boolean | ((inputValue: string, lastValidInputValue: string) => string)>;
-        };
-        showPasswordEvent: {
-            type: import('../../vue/dist/vue.esm-bundler.js').PropType<"click" | "pointerdown">;
-            default: string;
-        };
-        autoWidth: {
-            type: BooleanConstructor;
-        };
-        passwordPlaceholder: {
-            type: StringConstructor;
-            default: string;
-        };
-        onlyNumericInput: {
-            type: BooleanConstructor;
-        };
-    }>> & Readonly<{
-        onInput?: ((evt: Event, value: string) => any) | undefined;
-        onClear?: ((evt?: Event | undefined) => any) | undefined;
-        onBlur?: ((evt: FocusEvent) => any) | undefined;
-        onChange?: ((value: string) => any) | undefined;
-        onFocus?: ((evt: FocusEvent) => any) | undefined;
-        "onUpdate:modelValue"?: ((value: string) => any) | undefined;
-        onPressEnter?: ((evt: KeyboardEvent) => any) | undefined;
-    }>, "type" | "color" | "variant" | "disabled" | "clear" | "blur" | "focus" | "clearable" | "readonly" | "showLength" | "inputOnOutlimit" | "showPasswordEvent" | "autoWidth" | "passwordPlaceholder" | "onlyNumericInput" | "inputEl" | "togglePassword"> & {
+        showSuffix: boolean;
+        inlineThumbnail: boolean;
+        allowedImageTypes: string[];
+    }> & Omit<Readonly<import('./search/internal/SearchImageInput.vue').SearchImageInputPropsT> & Readonly<{
+        [x: `on${Capitalize<any>}`]: ((...args: any) => any) | undefined;
+    }>, "blur" | "focus" | "awaitUpload" | "getUploadedUrl" | "getIsUploading" | "resetImage" | ("size" | "disabled" | "preview" | "modelValue" | "imageUrl" | "enableImageSearch" | "maxImageSize" | "expanded" | "clearable" | "showSuffix" | "inlineThumbnail" | "allowedImageTypes")> & {
         focus: () => void | undefined;
         blur: () => void | undefined;
-        clear: () => void | undefined;
-        inputEl: () => HTMLInputElement | HTMLTextAreaElement | undefined;
-        togglePassword: () => void | undefined;
+        awaitUpload: () => Promise<void>;
+        getUploadedUrl: () => string;
+        getIsUploading: () => boolean;
+        resetImage: () => void;
     } & {} & import('../../vue/dist/vue.esm-bundler.js').ComponentCustomProperties & {} & {
-        $slots: Readonly<{
-            default(): any;
-            prepend(): any;
-            append(): any;
-            prefix(): any;
-            suffix(): any;
-        }> & {
-            default(): any;
-            prepend(): any;
-            append(): any;
-            prefix(): any;
-            suffix(): any;
+        $slots: {
+            prefix?(_: {}): any;
+            suffix?(_: {
+                hasValue: boolean;
+            }): any;
+            preview?(_: {
+                previewUrl: string;
+                remove: () => void;
+            }): any;
         };
     }) | null;
 }, HTMLDivElement>;