@opendesign-plus/components 0.0.1-rc.3 → 0.0.1-rc.31

package/src/components/search/internal/SearchImageInput.vue

@@ -0,0 +1,498 @@
+<script setup lang="ts">
+import { computed, nextTick, ref, watch } from 'vue';
+import { OFigure, OIcon, OInput, OPopover } from '@opensig/opendesign';
+import { useImageSearch } from '../composables/useImageSearch';
+import { useI18n } from '@/i18n';
+import type { OSearchUploadImageFn } from '../types';
+
+import IconSearch from '~icons/components/icon-header-search.svg';
+import IconClose from '~icons/components/icon-close.svg';
+import IconImageUpload from '~icons/components/icon-image-upload.svg';
+import IconImageClose from '~icons/components/icon-delete-hover.svg';
+import IconImageZoomin from '~icons/components/icon-image-zoomin.svg';
+
+export interface SearchImageInputPropsT {
+  modelValue?: string;
+  imageUrl?: string;
+  placeholder?: string;
+  imagePlaceholder?: string;
+  size?: 'small' | 'medium' | 'large';
+  enableImageSearch?: boolean;
+  uploadImage?: OSearchUploadImageFn;
+  maxImageSize?: number;
+  imageUploadTooltip?: string;
+  /** Show preview block below input when true and image staged */
+  expanded?: boolean;
+  /** Whether to render the clear icon when there is content */
+  clearable?: boolean;
+  /** Show the right suffix area (upload + clear). When false, suffix is empty. */
+  showSuffix?: boolean;
+  /** When true, render thumbnail inline inside prefix area (compact mode) */
+  inlineThumbnail?: boolean;
+  preview?: boolean;
+  disabled?: boolean;
+  allowedImageTypes?: string[];
+}
+
+const props = withDefaults(defineProps<SearchImageInputPropsT>(), {
+  modelValue: '',
+  imageUrl: '',
+  size: 'medium',
+  enableImageSearch: false,
+  maxImageSize: 10 * 1024 * 1024,
+  expanded: true,
+  clearable: true,
+  showSuffix: true,
+  inlineThumbnail: false,
+  preview: true,
+  disabled: false,
+  allowedImageTypes: () => ['image/jpeg', 'image/png', 'image/gif', 'image/webp'],
+});
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: string): void;
+  (e: 'update:imageUrl', url: string): void;
+  (e: 'focus', ev: FocusEvent): void;
+  (e: 'blur', ev: FocusEvent): void;
+  (e: 'enter'): void;
+  (e: 'clear'): void;
+  (e: 'image-clear'): void;
+  (e: 'image-upload-start', file: File): void;
+  (e: 'image-upload-success', url: string, file: File): void;
+  (e: 'image-upload-error', error: unknown, file: File): void;
+  (e: 'image-validate-error', reason: 'size' | 'type', file: File): void;
+  (e: 'preview-change', visible: boolean): void;
+}>();
+
+const { t } = useI18n();
+
+const uploadImageRef = computed(() => props.uploadImage);
+const maxImageSizeRef = computed(() => props.maxImageSize);
+const allowedImageTypesRef = computed(() => props.allowedImageTypes);
+const acceptAttr = computed(() => (props.allowedImageTypes ?? []).join(','));
+
+const image = useImageSearch({
+  uploadImage: uploadImageRef,
+  maxImageSize: maxImageSizeRef,
+  allowedImageTypes: allowedImageTypesRef,
+  onUploadStart: (file) => emit('image-upload-start', file),
+  onUploadSuccess: (url, file) => {
+    emit('update:imageUrl', url);
+    emit('image-upload-success', url, file);
+  },
+  onUploadError: (error, file) => emit('image-upload-error', error, file),
+  onValidationError: (reason, file) => emit('image-validate-error', reason, file),
+});
+
+const fileInputRef = ref<HTMLInputElement>();
+const inputRef = ref<InstanceType<typeof OInput>>();
+const uploadBtnRef = ref<HTMLElement | null>(null);
+
+const innerValue = computed({
+  get: () => props.modelValue,
+  set: (val: string) => emit('update:modelValue', val),
+});
+
+watch(
+  () => props.imageUrl,
+  (val) => {
+    image.setExternalUrl(val);
+  },
+  { immediate: true }
+);
+
+const showThumbnail = computed(() => !!image.previewUrl.value);
+
+const placeholder = computed(() => {
+  if (showThumbnail.value) {
+    return props.imagePlaceholder ?? t('search.extendedPlaceholder');
+  }
+  return props.placeholder ?? t('search.placeholder');
+});
+
+const handleClear = () => {
+  innerValue.value = '';
+  if (showThumbnail.value) {
+    handleImageClear();
+  }
+  emit('clear');
+};
+
+const handleImageClear = () => {
+  image.reset();
+  emit('update:imageUrl', '');
+  emit('image-clear');
+};
+
+const handleUploadClick = () => {
+  image.pickFile(fileInputRef.value);
+  nextTick(() => inputRef.value?.focus?.());
+};
+
+const handleFileSelect = (event: Event) => {
+  image.onFileChange(event);
+  nextTick(() => inputRef.value?.focus?.());
+};
+
+const handlePaste = (event: ClipboardEvent) => {
+  if (!props.enableImageSearch) return;
+  image.onPaste(event);
+};
+
+const handleDragOver = (event: DragEvent) => {
+  if (!props.enableImageSearch) return;
+  image.onDragOver(event);
+};
+
+const handleDrop = (event: DragEvent) => {
+  if (!props.enableImageSearch) return;
+  image.onDrop(event);
+};
+
+const onPreviewChange = (visible: boolean) => {
+  emit('preview-change', visible);
+};
+
+const hasValue = computed(() => !!innerValue.value || showThumbnail.value);
+
+const awaitUpload = () => image.awaitUpload();
+
+defineExpose({
+  focus: () => inputRef.value?.focus?.(),
+  blur: () => inputRef.value?.blur?.(),
+  awaitUpload,
+  getUploadedUrl: () => image.uploadedUrl.value,
+  getIsUploading: () => image.isUploading.value,
+  resetImage: () => {
+    image.reset();
+    emit('update:imageUrl', '');
+  },
+});
+</script>
+
+<template>
+  <div
+    class="o-search-image-input"
+    :class="{ 'has-image': showThumbnail, 'is-expanded': expanded && showThumbnail }"
+    @dragover="handleDragOver"
+    @drop="handleDrop"
+  >
+    <div class="o-search-image-input-row">
+      <OInput
+        ref="inputRef"
+        v-model="innerValue"
+        :placeholder="placeholder"
+        :size="size"
+        :disabled="disabled"
+        class="o-search-image-input-input"
+        @pressEnter="emit('enter')"
+        @focus="(e: FocusEvent) => emit('focus', e)"
+        @blur="(e: FocusEvent) => emit('blur', e)"
+        @paste="handlePaste"
+      >
+        <template #prefix>
+          <slot name="prefix">
+            <OIcon class="o-search-image-input-icon">
+              <IconSearch />
+            </OIcon>
+          </slot>
+          <div v-if="inlineThumbnail && showThumbnail" class="o-search-image-input-thumb">
+            <OFigure :src="image.previewUrl.value" alt="" class="o-search-image-input-thumb-figure" />
+            <div class="o-search-image-input-thumb-zoom" @mousedown.prevent>
+              <OIcon class="o-search-image-input-thumb-zoom-icon"><IconImageZoomin /></OIcon>
+            </div>
+            <OIcon class="o-search-image-input-thumb-remove" @mousedown.prevent @click.stop="handleImageClear">
+              <IconImageClose />
+            </OIcon>
+          </div>
+        </template>
+
+        <template v-if="showSuffix" #suffix>
+          <slot name="suffix" :has-value="hasValue">
+            <span v-if="enableImageSearch" ref="uploadBtnRef" class="o-search-image-input-upload-btn">
+              <OIcon class="o-search-image-input-icon upload" @click.stop="handleUploadClick">
+                <IconImageUpload />
+              </OIcon>
+            </span>
+            <OPopover
+              v-if="enableImageSearch && uploadBtnRef"
+              trigger="hover"
+              position="bottom"
+              :target="uploadBtnRef"
+              body-class="o-search-image-input-tooltip"
+            >
+              {{ imageUploadTooltip ?? t('search.imageUploadTooltip') }}
+            </OPopover>
+            <OIcon
+              v-if="clearable && hasValue"
+              class="o-search-image-input-icon close"
+              @mousedown.prevent
+              @click.stop="handleClear"
+            >
+              <IconClose />
+            </OIcon>
+          </slot>
+        </template>
+      </OInput>
+    </div>
+
+    <div v-if="expanded && showThumbnail" class="o-search-image-input-preview">
+      <slot name="preview" :preview-url="image.previewUrl.value" :remove="handleImageClear">
+        <div class="o-search-image-input-preview-wrapper">
+          <OFigure
+            :src="image.previewUrl.value"
+            :preview="preview"
+            alt=""
+            class="o-search-image-input-preview-figure"
+            @preview="onPreviewChange"
+          />
+          <div class="o-search-image-input-preview-zoom">
+            <OIcon class="o-search-image-input-preview-zoom-icon"><IconImageZoomin /></OIcon>
+          </div>
+          <OIcon class="o-search-image-input-preview-remove" @click.stop="handleImageClear">
+            <IconImageClose />
+          </OIcon>
+        </div>
+      </slot>
+    </div>
+
+    <input
+      v-if="enableImageSearch"
+      ref="fileInputRef"
+      type="file"
+      :accept="acceptAttr"
+      class="o-search-image-input-file"
+      @change="handleFileSelect"
+    />
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.o-search-image-input {
+  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);
+
+  &.is-expanded {
+    border-color: var(--o-color-primary1);
+
+    :deep(.o-input.el-input .el-input__wrapper),
+    :deep(.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 {
+  display: flex;
+  align-items: center;
+}
+
+.o-search-image-input-input {
+  width: 100%;
+}
+
+.o-search-image-input-icon {
+  cursor: pointer;
+  color: var(--o-color-info1);
+  font-size: 16px;
+
+  &.close {
+    font-size: 16px;
+    @include x-svg-hover;
+  }
+
+  &.upload {
+    fill: var(--o-color-info1);
+  }
+}
+
+.o-search-image-input-upload-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 4px;
+  margin-right: 8px;
+  cursor: pointer;
+  flex-shrink: 0;
+
+  @include hover {
+    background-color: var(--o-color-control2-light);
+
+    .o-search-image-input-icon.upload {
+      color: var(--o-color-primary2);
+    }
+  }
+}
+
+.o-search-image-input-file {
+  display: none;
+}
+
+.o-search-image-input-thumb {
+  display: inline-flex;
+  align-items: center;
+  margin-left: 8px;
+  position: relative;
+  overflow: visible;
+  flex-shrink: 0;
+
+  @include hover {
+    .o-search-image-input-thumb-remove,
+    .o-search-image-input-thumb-zoom {
+      opacity: 1;
+    }
+  }
+}
+
+.o-search-image-input-thumb-figure {
+  height: 40px;
+  width: 40px;
+  border-radius: 4px;
+  overflow: hidden;
+
+  :deep(img) {
+    height: 40px;
+    width: 40px;
+    object-fit: cover;
+    object-position: center;
+    border-radius: 4px;
+  }
+
+  @include respond-to('pad_v-pc_s') {
+    height: 32px;
+    width: 32px;
+  }
+
+  @include respond-to('<=pad_v') {
+    height: 24px;
+    width: 24px;
+  }
+}
+
+.o-search-image-input-thumb-zoom {
+  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-icon {
+    color: #fff;
+    font-size: 16px;
+  }
+}
+
+.o-search-image-input-thumb-remove {
+  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);
+
+  :deep(svg) {
+    width: 16px;
+    height: 16px;
+    fill: rgb(var(--o-mixedgray-9));
+  }
+}
+
+.o-search-image-input-preview {
+  padding: 0 12px 8px;
+
+  .o-search-image-input-preview-wrapper {
+    position: relative;
+    display: inline-flex;
+    overflow: visible;
+    margin-top: 8px;
+
+    @include hover {
+      .o-search-image-input-preview-remove,
+      .o-search-image-input-preview-zoom {
+        opacity: 1;
+      }
+    }
+  }
+
+  .o-search-image-input-preview-zoom {
+    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-zoom-icon {
+      color: #fff;
+      font-size: 24px;
+    }
+  }
+
+  .o-search-image-input-preview-figure {
+    height: 72px;
+    width: 72px;
+    border-radius: 4px;
+    overflow: hidden;
+
+    :deep(img) {
+      height: 72px;
+      width: 72px;
+      object-fit: cover;
+      object-position: center;
+      border-radius: 4px;
+    }
+  }
+
+  .o-search-image-input-preview-remove {
+    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);
+
+    :deep(svg) {
+      width: 16px;
+      height: 16px;
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+.o-search-image-input-tooltip {
+  padding: var(--o-gap-3) var(--o-gap-4);
+  max-width: 240px;
+  @include tip2;
+}
+</style>